gulp 任务组合

一、压缩

1：外挂

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

2：任务

gulp.task('minifycss', function() {
    return gulp.src('src/*.css')      //压缩的文件
        .pipe(gulp.dest('minified/css'))   //输出文件夹
        .pipe(minifycss());   //执行压缩
});

 

二、压缩js

gulp.task('minifyjs', function() {

    return gulp.src('src/*.js')

        .pipe(concat('main.js'))    //合并所有js到main.js

        .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹

        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名

        .pipe(uglify())    //压缩

        .pipe(gulp.dest('minified/js'));  //输出

});

JSHint，拼接及缩小化JavaScript

gulp.task('scripts', function() { 

  return gulp.src('src/scripts/**/*.js')

    .pipe(jshint('.jshintrc'))

    .pipe(jshint.reporter('default'))

    .pipe(concat('main.js'))

    .pipe(gulp.dest('dist/assets/js'))

    .pipe(rename({suffix: '.min'}))

    .pipe(uglify())

    .pipe(gulp.dest('dist/assets/js'))

    .pipe(notify({ message: 'Scripts task complete' }));

});

编译Sass，Autoprefix及缩小化

gulp.task('styles', function() { 
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded' }))//编译Sass
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//通过Autoprefixer，添加前缀 
    .pipe(gulp.dest('dist/assets/css'))//保存未压缩文件到我们指定的目录下面
    .pipe(rename({suffix: '.min'}))//产生一个缩小化的.min版本
    .pipe(minifycss())//压缩样式文件，自动重新整理页面
    .pipe(gulp.dest('dist/assets/css'))//输出压缩文件到指定目录
    .pipe(notify({ message: 'Styles task complete' }));//通知任务已经完成
});

 

三、执行压缩前，先删除文件夹里的内容

gulp.task('clean', function(cb) {
    del(['minified/css', 'minified/js'], cb)
});

 

默认任务

gulp.task('default', ['clean'], function() {
    gulp.start('minifycss', 'minifyjs');
});

 

编译Sass ：gulp-ruby-sass

gulp-ruby-sass是调用sass，所以需要ruby环境，需要生成临时目录和临时文件

gulp-sass是调用node-sass,有node.js环境就够了，编译过程不需要临时目录和文件，直接通过buffer内容转换。

npm install gulp-ruby-sass --save-dev