任務的動態載入機制(進階)
或許你已經發現,tmt-workflow
所有專案隻共用一份 node_modules
,所有的task 也都定義在 #gulpfile.js
外的 _tasks
目錄下,其實作方式其實很簡單。
我們先看專案下面的 gulpfile.js
var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); //注册 var deep = 3; run_tasks('_tasks'); function run_tasks(tasks_path) { if (--deep < 0) { throw new Error('something wrong in require tasks!'); return; } tasks_path = path.join('../', tasks_path); if (fs.existsSync(tasks_path)) { require(tasks_path)(gulp); } else { run_tasks(tasks_path); } }
每次執行gulp 任務時,會向上尋找 _tasks
目錄,這裡定義的層級為3,也就是在gulpfile.js 會向上尋找3 個層級,只要 _tasks
在這3 個層級內即可,如果你的目錄很深很深,改一下這裡的3 即可。
接著看 _tasks
目錄下的 index.js
:
fs.readdirSync(__dirname).filter(function (file) { return (file.indexOf(".") !== 0) && (file.indexOf('task') === 0); }).forEach(function (file) { var registerTask = require(path.join(__dirname, file)); registerTask(gulp, config); });
其實就是載入目前目錄下所有以 task
開頭的文件,我們將各個gulp 任務定義成一個個以 task
開頭的js 文件,這樣,就動態的註冊了所有gulp 任務,共用了一個 node_modules
。