當我們在項目中使用gulp來實現前端自動化時，常常因任務太多導致gulpfile.js越來越臃腫，增加后期維護/變更成本。在計算機科學領域中，分治可以將我們的項目變得井然有序。所以，我們利用這個理念，將gulp task拆分至不同的文件中，gulpfile.js作為入口文件，來解決這個問題。

項目結構：

|--app
|--gulp
|----task
|------task1.js
|------task2.js
|--gulpfile.js

其中，假設task1.js：

// $ 是對 gulp-load-plugins 的引用
module.exports = function(gulp, $) {gulp.task('task1', function () {return gulp.src('xx/xx').pipe($.pluginName())});
}

我們設想在gulpfile.js使用gulp-load-task:

let path = require('path')
let taskDir = path.join(__dirname, 'gulp', 'task')
require('gulp-load-task)(taskDir)

gulp-load-task 實現

gulp-load-task.js源碼在這里，做了兩件事：

• 掃描taskDir下的所有文件，生成關系表
• 加載關系表中的每一個.js文件

值得一提的是，源碼中用到了兩個非常巧妙的方法來實現上述目的：reduce和Object.defineProperty

生成關系表

用 reduce 將數組轉化為對象，有種函數式編程的感覺，很巧妙。部分代碼如下：

let taskModules = {} // 任務關系表
taskModules = fs.readdirSync(dir).filter(f => /\.js$/.test(f)).reduce((result, file) => {let filePath = path.resolve(dir, file)let fileName = path.basename(file, '.js')result[fileName] = filePathreturn result  // (1)}, {});

加載文件

經過步驟（1），我們得到了一組任務對象集合，接下來，需要將里面的文件逐一導入。

Object.keys(taskModules).forEach(taskName => {require(taskModules[taskName])(gulp, $)})

到這里，所有的功能都已經實現，然而源碼實現卻有所不同。在源碼中，我將taskModules做了一次轉化，在每個屬性中添加了getter方法并返回require(...)。有興趣的話可以看一下。

發布到 NPM

轉載于:https://www.cnblogs.com/fayin/p/7890589.html

總結

以上是生活随笔為你收集整理的gulp-load-task 解决 gulpfile.js 过大的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。