使用gulp实现定制化需求

最近再做项目时，遇到了一些定制化需求，虽说需求比较简单，但还是在此做下记录。

需求

• 通过命令行方式进行定制化打包
• 项目与项目间的定制化需求并不完全一致，需做出区分
• 每个项目一套配置文件，分别读取配置文件实现定制化需求

为何选择gulp

首先是因为此项目是基于ionic1的老项目, 默认集成了gulp(-_-11 哈哈), 但主要还是因为gulp是一套基于流的自动化构建工具，易于使用，并有健全的插件机制，完全适用于目前需要。

gulp的使用

gulp的基本使用在此不做赘述，需要了解的同学点此链接进行学习。

进入正题

上面说过gulp有健全的插件系统，我们就是通过这些插件来实现需求. 插件通过npm install安装插件。

• yargs (处理命令行传参)

var args = require('yargs').argv;  //argv就是传递的命令行参数
var env = args.env || 'default';
执行gulp xxx --env=xxx |  gulp xxx --env xxx 都可得到args.env = xxx

• gulp-sequence
  gulp任务的默认执行方式是并行执行，所有task会同时执行。但在有些特定需求中，会造成不确定性。如果我们希望任务串行执行，即一个任务完成后在执行下个任务，就需要使用到gulp-sequence。

var gulpSequence = require('gulp-sequence');
gulp.task('build', function (callback) {
    gulpSequence(
      'clean',
      'copy',
      ['task1', 'task2', 'task3'],
      function () {
        console.log('success');
      });
});

clean, copy, ['task1', 'task2', 'task3'] 三个任务会按顺序执行，['task1', 'task2', 'task3']中的任务会并行执行。

注意: 我们期望的顺序是clean执行完成后执行copy，copy完成后执行['task1', 'task2', 'task3']，所以每个task必须要返回stream, 如return gulp.src().pipe()....，
或者支持回调，如gulp.task('task1', function(done){...})。这样才能保证任务按顺序执行。如果没有满足上述要求，任务是串行执行，但不会等一个任务完成才执行下一个。

结合yargs与gulpSequence，可以解决前两点需求

var args = require('yargs').argv;
var gulpSequence = require('gulp-sequence');

var defaultTask = ['task1', 'task2', 'task3'];
var xxxTask = ['task4', 'task5', 'task6'];

gulp.task('build', function (callback) {
    gulpSequence(
      'clean',
      'copy',
      eval(args.env || 'default' + 'Task'),
      function () {
        console.log('success');
      });
});

提取出各个定制化的需求，通过 gulp build --env xxx传参的不同，分别执行对应任务。

• fs, gulp-template, gulp-replace
  fs插件用于读取配置文件

var fs = require('fs');
var config = JSON.parse(fs.readFileSync('config.json', 'utf8'));

使用gulp-template替换读取到的数据到html中

test.html
Hello <%= name %>

var template = require('gulp-template');
gulp.task('task1', () =>
    gulp.src('src/test.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist'))
);

gulp-replace与gulp-template使用相似，详情点击查看

• merge-stream
  在使用gulp-template, gulp-replace中，总会遇到task处理逻辑相同，但src和dest不同的情况，重复定义任务过于繁琐，这时就需要是用到merge-stream。

未使用merge-stream

var template = require('gulp-template');

gulp.task('task1', () =>
    gulp.src('src/test-1.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist/test-1.html''))

gulp.task('task2', () =>
    gulp.src('src/test-2.html')
        .pipe(template({name: config.name}))
        .pipe(gulp.dest('dist/test-2.html''))

使用merge-stream

var merge = require('merge-stream');

function html (src, dest) {
  return gulp.src(src)
            .pipe(template({name: config.name}))
            .pipe(gulp.dest(dest));
  }
}

gulp.task('template', function () {
    var stream1 = html('src/test-1.html', 'dest/test-1.html');
    var stream2 = html('src/test-2.html', 'dest/test-2.html');
    return merge(stream1, stream2)
})

通过以上几个简单插件，就可以实现简单的定制化需求。

总结

gulp这种前端自动构建工具，可以大量减少重复操作，把复杂问题简单化，从而提高开发效率。这篇文章也只是几个插件简单的结合使用，更多的功能还有待去继续挖掘。