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 根据多个入口点来打包成多个文件。这些文件所共同依赖的模块会被打包在一个单独的文件中。在使用时，需要先引用包含共同模块的文件，再引用单个入口文件对应的打包之后的文件。