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

开发者楚恒技术 2022年11月21日

0 收藏 906 点赞 4,413 浏览 1095 个字

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);