使用 gulp 和 browserify 捆绑多个文件答案

【问题标题】：Bundle multiple files with gulp and browserify使用 gulp 和 browserify 捆绑多个文件
【发布时间】：2016-08-08 13:35:10
【问题描述】：

我有一个类似的项目结构：

src
  |html
  |javascript
    |file_one.js
    |file_two.js
  |styles
dist
gulpfile.js

我的问题是：如何将“javascript”文件夹中的所有文件捆绑到根“dist”文件夹中，并按以下方式重命名捆绑文件？

file_one.js ----> file_one.bundle.js file_two.js ----> file_two.bundle.js

我正在执行以下操作，但我无法将捆绑文件放入根“dist”文件夹，而且，我不知道这是否是最漂亮的方式。

gulp.task("bundler", function(){
  var src_arr = ['src/javascript/file_one.js', 'src/javascript/file_two.js'];
  src_arr.forEach(function(file) {
    var bundle = browserify([file]).bundle();
    bundle.pipe(source(file.substring(0,file.indexOf('.')) + ".bundle.js"))
      .pipe(gulp.dest('dist/'));
  });
});

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： javascript gulp frontend browserify

【解决方案1】：

我想这更像是一个长评论而不是“答案”……

Browserify - multiple entry points 和@Hafiz Ismail 的https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623 很好地介绍了处理多个 browserify 入口点的各种方法。

由于您处理的是两个已知文件而不是一个 glob，因此最糟糕的解决方案可能是设置一个浏览器化惰性管道 (https://github.com/OverZealous/lazypipe)，并从两个单独的任务中调用它 - 一个是

gulp.task('first', function(){
    gulp.src('src/javascript/file_one.js')
        .pipe(browserifyingLazypipe())
};

（我坦白承认我没有尝试在惰性管道中使用 browserify）

重命名的一个笨办法是使用gulp-rename

.pipe(rename({
    extname: '.bundle.js'
})

【讨论】：