gulp 插件

1. gulp-plumber 插件

  这个插件的作用简单来说就是一旦pipe中的某一steam报错了，保证下面的steam还继续执行。因为pipe默认的onerror函数会把剩下的stream给unpipe掉，这个插件阻止了这种行为。那它一般用于哪种场景呢？比如，代码每次build之前要跑一遍jshint和jscs来确保所有代码都符合规范，但一旦某些代码不符合规范，整个build流程就会停止，这个时候就需要gulp-plumber出场了。如：

gulp.task('build', ['jslint', 'xxxx']);
gulp.task('jslint', function () {
    return gulp
        .src(config.js.all)
        .pipe($.plumber())
        .pipe($.jshint())
        .pipe($.jscs()); 
});

  这样，一旦jshint或jscs报错，整个build流程还是可以继续走下去的，而且gulp-plumber会给出一个报错提醒我们：

报错

2. gulp-cached 插件

  通过使用gulp-print，可以发现，传统的gulp-wacth，是不会管你当前更新的是哪个文件，总之，当你告诉他监控某个目录，那么当这个目录里有某个文件更新了，他就会一次性的把目录下的文件全部执行一次task，真的很呆……
  现在，你可以使用gulp-cached这个组件，他的源代码其实也很简单，就是将构建过的文件，生成一个hash，缓存在内存中，直到这个文件被更新，则只更新这个文件，而不再会一次性重新构建全部监控文件。

3. gulp-cssnano 插件--压缩 CSS 文件

var cssnano = require('gulp-cssnano');
gulp.task('style', function(){
     gulp.src(['./css/style.css','./css/piano.css'])
         .pipe(cssnano())
         .pipe(gulp.dest('dist/css'));
});

4. gulp-htmlmin 插件--压缩 html 文件

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
     gulp.src('./*.html')
         .pipe(htmlmin({
             collapseWhitespace: true,
               removeComments: true
         }))
         .pipe(gulp.dest('dist'));
});

5. gulp-uglify 插件--压缩 js 文件

var uglify = require('gulp-uglify');
gulp.task('script', function(){
     gulp.src(['./js/common.js','./js/piano.js'])
         .pipe(uglify())
         .pipe(gulp.dest('dist/js'));
});

6. gulp-connect 插件—创建本地服务

• 定义一个server

var gulp = require('gulp'),     // 引用 gulp
    connect = require('gulp-connect');

gulp.task('connect', function() {
    connect.server({
        root: 'app',    //从app这个目录开启server
        port: 8001,     // 将服务开启在 8001 端口，默认是 8080
        livereload: true  // 支持热加载功能
    });
})

gulp.task('html', function () {   
    gulp.src('./app/*.html')    // 来源是 所有的 .html 文件
    .pipe(connect.reload());
});

gulp.task('watch', function () {
    gulp.watch(['./app/*.html'], ['html']);
});

gulp.task('default', ['connect', 'watch']);

• 启动server：

gulp     // 因为默认执行 default，也就是执行 ‘connect’与 ‘watch’

7. gulp-if 插件

• 运行 demo 时，condition 为 false 的情况下也是执行 uglify() 与 beautify() 插件的。

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var beautify = require('gulp-beautify');
 
var condition = function (file) {
  // TODO: add business logic
  return true;
}
 
gulp.task('task', function() {
  gulp.src('./src/*.js')
    .pipe(gulpif(condition, uglify(), beautify()))
    .pipe(gulp.dest('./dist/'));
});

• 判断是开发环境还是生产环境：

const env = process.env.NODE_ENV || 'development'
const isProduction = () => env === 'production'

gulp.task('compile:html', () => {
    return gulp.src(['src/**/*.html'])
        .pipe(plugins.plumber())
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.if(isProduction, plugins.htmlmin({
            collapseWhitespace: true,
            caseSensitive: true
        })))
        .pipe(plugins.rename({ extname: '.wxml' }))
        .pipe(plugins.if(!isProduction, plugins.sourcemaps.write('.')))
        .pipe(gulp.dest('app'))
})

8. gulp-imagemin 插件

• 图片文件压缩（包括PNG、JPEG、GIF和SVG图片）

var gulp     = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pump     = require('pump');

gulp.task('testImagemin', function (cb) {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true       //类型：Boolean 默认：false 多次优化svg直到完全优化
        }),
        gulp.dest('dist/img')
    ], cb);
});