重构gulpfile.js--基于gulp 4.0

  当项目越来越庞大的时候，gulpfile.js 文件可能也会变得很庞大，上千行的代码，各种任务纵横交错，看得眼花缭乱。这个时候，应该考虑一下重构 gulpfile.js 文件。重构的关键字-- 拆分。

  我的 gulp 的版本是 4.0.2，参考了网上很多这方面的博文，发现好多都不适用，基本都是以 3.0 为基础的。磕磕碰碰，终于成功做了一个小例子。

0、先安装需要的 gulp 插件。

npm install require-dir --save

1、构建文件结构。tasks 文件夹就是一个个拆分出来的任务的集合。

gulpfile.js
tasks/
├── sayGoodbye.js
├── sayHello.js
└── gulp.config.js

2、gulpfile.js 文件

var gulp = require('gulp');

var requireDir = require('require-dir');
var taskList = requireDir('./tasks');

// 引入配置文件
var config = require('./tasks/gulp.config')();

// 加载任务
if (taskList) {
  for (var key in taskList) {
    var task = taskList[key];
    task(gulp, config);  // gulp, config为入参，传给其他任务，避免其他任务文件重复定义
  }
}

gulp.task('default', gulp.series('sayHello', 'sayGoodbye',  function (done) {
    done();
}));

3、gulp.config.js 是配置文件，系统环境配置等信息可以配置到这个文件里面。非必须，如果不喜欢抽象出来，可以直接在 

gulpfile.js 文件声明。

module.exports = function () {
    return {
        enviroment: 'DEV',
        user: 'phoebe.huang',
        xxx: 'xxx'
    }
}

4、任务文件。

module.exports = function (gulp, config) {
  gulp.task('sayHello', function (done) {
    console.log('Hello, I am phoebe!', config);
    done();
  });
};