gulp的简单应用

Posted 2020-08-31 kelly*

下面是使用gulp压缩 scss&js 文件的简单应用：


//gulpfile.js名字必须是这个
//这儿文件告诉gup工具,具体要做那些事情


//1.引入gulp模块
//var gulp = require(‘gulp‘);

//2.告诉gulp去执行某个任务
// gulp.task("task.name",function(){
//     //do something
//    
// });
// gulp.task("bacon",function(){
//     console.log(‘i love to eat bacon!‘);
// });
//3.执行方法 在终端: gulp bacon  写什么执行什么

//4. 将style.scss文件转css文件
   //需要引入sass模块
    //安装
    // npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

// gulp.task(‘sass‘,function(){
//
// })

/**
 * Generate CSS from SCSS
 * Build sourcemaps
 *
 *  npm install gulp-sass --save-dev

 */
var gulp = require(‘gulp‘);
var sass = require(‘gulp-sass‘);

gulp.task(‘sass‘, function () {
    // 指定压缩的文件
    return gulp.src(‘./app/scss/*.scss‘)
        .pipe(sass().on(‘error‘, sass.logError))
         //指定要压缩到哪个目录
        .pipe(gulp.dest(‘./app/css‘));
});


//执行:gulp sass

//压缩js: 1.npm install gulp-uglify --save-dev

// var gulp = require(‘gulp‘);
// var uglify=require(‘gulp-uglify‘);
// gulp.task(‘uglify‘,function(){
//     //当前压缩的文件是谁
//     return gulp.src(‘./app/js/test.js‘)
//         .pipe(uglify())
//         .pipe(gulp.dest(‘dist‘))
// })
//执行 : gulp uglify


// npm install gulp-rename --save-dev  改名

//压缩后改名

var gulp = require(‘gulp‘);
var uglify=require(‘gulp-uglify‘);
gulp.task(‘uglify‘,function(){
    //当前压缩的文件是谁
    return gulp.src(‘./app/js/test.js‘)
        .pipe(uglify())
        .pipe(rename({suffix:‘.min‘}))
        .pipe(gulp.dest(‘dist‘))
})
//执行 : gulp uglify