重構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();
  });
};