前端 | 重構 gulpfile.js

背景

前端任務打包工具選用的是 gulp, 當時選用 gulp 也是偶然，在使用 grunt 初期，翻閱 dailyjs.com 時發現一片文章着重介紹了 gulp, 甚至還預言是 grunt 的勁敵，好奇心驅使，確實發現，gulp 的流的概念更人性化，看着當時寫的 grunt 配置文件，不忍直視

因爲項目的不斷迭代，前端的任務也在不斷的迭代，任務愈來愈多，沒有優化前，所有的任務都在一個單獨的 gulpfile.js 中，後來隨着時間的推移，發現修改一個任務時，查詢好麻煩，五百行左右的代碼讓人煩躁，代碼結構和 https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple... 一模一樣

重構 gulpfile.js 必需要進行

重構迭代1: 拆分任務

最早是按照 https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-ac... 此文檔中的架構進行迭代的

文件結構

gulpfile.js
tasks/
├── xxxx.js
├── xxxx.js
└── image.js

image.js

var imagemin = require('gulp-imagemin');

gulp.task('img', function() {
    return gulp.src('./images/**/*.*')
        .pipe(imagemin({
            optimizationLevel: 2,
            progressive: true

        }))
        .pipe(gulp.dest('./imagemini'))
});

gulpfile.js

var requireDir = require('require-dir')
  , tasks = requireDir('./tasks')
  ;

這種文件架構讓任務按照類型分紅子任務放在單獨的文件中，頓時感受乾淨了不少，這時能夠自由的添加子任務，而不用管 gulpfile.js, 此時子任務比如插件，須要就添加，沒用就刪除，至關方便

重構迭代2: 避免模塊和插件重複依賴

隨着時間的推移，發現這種組織架構仍是有些不方便，不方便在哪裏呢，每個任務文件中，我都要寫 var xxx = require('xxx'), 若是你是用上面的架構，任務多的時候，估計也會抓狂，由於你會發現 插件和模塊依賴被重複的引入進來，這樣就提升了成本

我不想在子任務文件中重複的引入 插件或模塊依賴，有沒有上面好方法，stackoverflow 是個好老師，老師告知：

• 使用 gulp-load-plugins 插件
  地址：https://www.npmjs.com/package/gulp-load-plugins
• 把子任務封裝成模塊

代碼結構

gulpfile.js
tasks/
├── xxxx.js
├── xxxx.js
└── image.js

gulpfile.js

var gulp = require('gulp')
  , gulpLoadPlugins = require('gulp-load-plugins')
  ;

// 這裏請查看文檔
gulpLoadPlugins.imagemin = require('gulp-imagemin');

require('./tasks/image')(gulp, gulpLoadPlugins);

image.js

module.exports = function (gulp, Plugin) {
    gulp.task('img', function() {
        return gulp.src('./images/**/*.*')
            .pipe(Plugin.imagemin({
                optimizationLevel: 2,
                progressive: true

            }))
            .pipe(gulp.dest('./imagemini'))
    });
};

運行任務 一切正常，此時一個文件測試已經ok

可是 ./tasks 下面是有不少的子任務，因此須要一個迭代加載，修改 gulpfile.js 以下

var gulp = require('gulp')
  , gulpLoadPlugins = require('gulp-load-plugins')
  // 這裏獲取子任務文件列表 使用了 fs 模塊
  , gulpTaskList = require('fs').readdirSync('./tasks/')
  ;

// 這裏請查看文檔
gulpLoadPlugins.imagemin = require('gulp-imagemin');

gulpTaskList.forEach(function(taskfile) {
    require('./tasks/' + taskfile)(gulp, gulpLoadPlugins);
});

這一次迭代避免了重複依賴的問題，可是你會發現，全部的依賴都聲明在 gulpTaskList 命名空間下，若是你依賴不少插件或模塊，gulpfile.js 也是至關長，魚和熊掌不可兼得，在如今狀況下，只能尋找最佳的解決方案

重構迭代3: 參數配置全局化

其實第二部迭代以後，就能夠知足大部分需求，但仍是有小夥伴抱怨，有些子任務有相同的參數，能不能抽取出來，放到一個單獨的文件中，so 繼續翻閱文檔

參考文檔https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-external...

代碼結構

gulpfile.js
gulp
├── config.json  
├── tasks/
    ├── xxxx.js
    ├── xxxx.js
    └── image.js

注意：文件夾層次變了

config.json

{
    "pnglevel": 2
}

gulpfile.js

var gulp = require('gulp')
  , config = require('./gulp/config.json');
  , gulpLoadPlugins = require('gulp-load-plugins')
  , gulpTaskList = require('fs').readdirSync('./gulp/tasks/')
  ;

gulpLoadPlugins.imagemin = require('gulp-imagemin');

gulpTaskList.forEach(function(taskfile) {
    require('./gulp/tasks/' + taskfile)(gulp, gulpLoadPlugins, config);
});

image.js

module.exports = function (gulp, Plugin, config) {
    gulp.task('img', function() {
        return gulp.src('./images/**/*.*')
            .pipe(Plugin.imagemin({
                optimizationLevel: config.pnglevel,
                progressive: true

            }))
            .pipe(gulp.dest('./imagemini'))
    });
};

這次迭代結束後，我把子任務中通用的配置都寫到 ./gulp/config.json 中，全局配置

重構迭代4: 參數配置模塊化

這次迭代緊跟迭代3，json 不夠完美，不想每次去寫 "", 這裏我把配置文件封裝成一個模塊

即迭代3 中的 config.json 變成了 config.js

config.js

module.exports = function () {
  var config = {
      pnglevel: 2
  };
  return config;
};

gulpfile.js 加載

var config = require('./gulp/gulp.config')();

其餘不變，當封裝成一個模塊的時候，你就發現好處多多了，能夠在模塊中添加函數，你也能夠把配置拆分，根據你的業務須要，自由調整

後記

經過4步的迭代，整個代碼組織架構就清晰多了，很感謝這麼多熱愛開源，樂於助人的朋友，謝謝

注意： 子任務中注意文件夾的層次，子任務中的文件夾是以 gulpfile.js 爲基準，由於 gulpfile.js 把子任務都包含進來了