任務(wù)的動(dòng)態(tài)加載機(jī)制(高級(jí))

2018-11-15 17:51 更新

或許你已經(jīng)發(fā)現(xiàn),tmt-workflow 所有項(xiàng)目只共享一份 node_modules,所有的 task 也都是定義在 gulpfile.js 外的 _tasks 目錄下,其實(shí)現(xiàn)方式其實(shí)很簡(jiǎn)單。

我們先看項(xiàng)目下面的 gulpfile.js

var gulp = require('gulp');
var fs = require('fs');
var path = require('path');

//注冊(cè)
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);
    }
}

每一次執(zhí)行 gulp 任務(wù)時(shí),會(huì)向上尋找 _tasks 目錄,這里定義的層級(jí)為 3,也就是在 gulpfile.js 會(huì)向上尋找 3 個(gè)層級(jí),只要 _tasks 在這 3 個(gè)層級(jí)內(nèi)即可,如果你的目錄很深很深,改一下這里的 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);
});

其實(shí)就是加載當(dāng)前目錄下所有以 task 開(kāi)頭的文件,我們將各個(gè) gulp 任務(wù)都定義成一個(gè)個(gè)以 task 開(kāi)頭的 js 文件,這樣,就動(dòng)態(tài)的注冊(cè)了所有 gulp 任務(wù),共用了一個(gè) node_modules

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)