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

項目結(jié)構(gòu)：

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

其中，假設(shè)task1.js：

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

我們設(shè)想在gulpfile.js使用gulp-load-task:

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

gulp-load-task 實現(xiàn)

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

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

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

生成關(guān)系表

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

let taskModules = {} // 任務(wù)關(guān)系表
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)}, {});

加載文件

經(jīng)過步驟（1），我們得到了一組任務(wù)對象集合，接下來，需要將里面的文件逐一導(dǎo)入。

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

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

發(fā)布到 NPM

轉(zhuǎn)載于:https://www.cnblogs.com/fayin/p/7890589.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。