Question

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

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

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

file_one.js ----＆gt; file_one.bundle.js file_two.js ----＆gt; 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/'));
  });
});

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

Answer 1

我想这是一个很长的评论，而不是“回答”......

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

由于你处理两个已知文件而不是一个glob，最有效的解决方案可能是设置一个浏览器lazypipe（https://github.com/OverZealous/lazypipe），并从两个单独的任务中调用它 - 一个是

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

（我承认我没有尝试在lazypipe中使用browserify）

重命名的一种方法是使用gulp-rename

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

使用gulp和browserify捆绑多个文件

1 个答案: