使用gulp和browserify捆绑多个文件

I have a project structure that is something like that:

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

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

My question is: How can I bundle all files within the "javascript" folder into the root "dist" folder renaming the bundle files in the following way?

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

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

I'm doing the following, but I can't put the bundle files into the root "dist" folder, and, I don't know if this is the most pretty way.

我正在执行以下操作,但我无法将捆绑文件放入根“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/'));
  });
});

Any help will be appreciated. Thanks

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

1 个解决方案

#1

I guess this is more a long comment than an "answer"…

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

Various ways to deal with multiple browserify entry points is covered well in Browserify - multiple entry points and in @Hafiz Ismail's https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623.

Browserify中有很多处理多个browserify入口点的方法 - 多个入口点和@Hafiz Ismail的https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623。

Since you're dealing with two know files rather than a glob, the gulpiest solution might be to set up a browserifying lazypipe (https://github.com/OverZealous/lazypipe), and call that from two separate tasks - one would be

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

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

(I freely admit that I haven't tried using browserify in a lazypipe)

(我坦率地承认我没有尝试在lazypipe中使用browserify)

A gulpy way to do the renaming is use gulp-rename

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

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

#1