gulp批量打包文件並提取公共文件

gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器。

browseriyf是模塊化打包工具。

一般情況下，Browserify 會把所有的模塊打包成單個文件。單個文件在大多數情況下是適用的，可以減少 HTTP 請求數量，提高性能。不過在其他一些情況下，打包的單個文件可能過大，使得頁面的初始加載時間過長。這主要是因為單個文件中包含了全部的模塊，其中的某些模塊使用得很少，或是在頁面初始加載的時候不需要，可以在需要的時候再加載。這個時候可以用 Browserify 的插件來創建不同的打包文件。

最近項目研究到這個問題，配置的東西記錄下，以備翻查。

下面的配置可以批量提取文件進行打包公共文件。

var pages = [];
function bundle(){
    globby(['src/js/**/*.js', '!src/js/**/*.min.js', '!src/js/lib/*.js', '!src/js/frontObj.js',
                 '!src/js/langConfig.js', '!src/js/rconfig.js', '!src/js/test/**/*.js']).then(function(entries){
        pages = entries;
        var b =  browserify(pages);
    var outputs = pages.map(function(page) { return page.replace("src","dist") });
    
     b.plugin('factor-bundle',{outputs: outputs});
    
     return b.bundle()
      //.pipe(fs.createWriteStream('dist/js/common.js'))
      .pipe(source("common.js")) 
//      .pipe(buffer())
//      .pipe(rename({ suffix: '.min' }))
//      .pipe(uglify())
//      .pipe(sourcemaps.init({loadMaps: true})) 
//      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("dist/js/"));
    });
    console.log(pages);
     
}
gulp.task("browserify", bundle);

用到插件 "factor-bundle",插件作用處理重復模塊

factor-bundle 根據多個入口點來打包成多個文件。這些文件所共同依賴的模塊會被打包在一個單獨的文件中。在使用時，需要先引用包含共同模塊的文件，再引用單個入口文件對應的打包之后的文件。