任務的動態載入機制(進階)


或許你已經發現,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