javascript - Gulp Bundle + Browserify on multiple files - Stack Overflow

admin管理员组

文章数量:1345047

So I have asimple gulp task function which currently converts my main.jsx to a main.js file:

gulp.task("bundle", function () {
    return browserify({
        entries: "./app/main.jsx",
        debug: true
    }).transform(reactify)
        .bundle()
        .pipe(source("main.js"))
        .pipe(gulp.dest("app/dist"))
});

I was wondering if it would be possible to put multiple bundles in this gulp.task? My ideal oute would be being able to do:

• main.jsx to main.js

• otherPage.jsx to otherPage.js

• otherPage2.jsx to otherPage2.js

All in one gulp task.

I have searched onliine but cannot seem to find anything relevant, any help or advice is appreciated, thank you in advance.

So I have asimple gulp task function which currently converts my main.jsx to a main.js file:

gulp.task("bundle", function () {
    return browserify({
        entries: "./app/main.jsx",
        debug: true
    }).transform(reactify)
        .bundle()
        .pipe(source("main.js"))
        .pipe(gulp.dest("app/dist"))
});

I was wondering if it would be possible to put multiple bundles in this gulp.task? My ideal oute would be being able to do:

• main.jsx to main.js

• otherPage.jsx to otherPage.js

• otherPage2.jsx to otherPage2.js

All in one gulp task.

I have searched onliine but cannot seem to find anything relevant, any help or advice is appreciated, thank you in advance.

• javascript
• reactjs
• gulp
• browserify
• jsx

Share Improve this question Follow asked Oct 26, 2016 at 23:55 daniel aagentahdaniel aagentah 1,70255 gold badges3636 silver badges5757 bronze badges 2

• Why do you not want them in the one bundle? – cartant Commented Oct 27, 2016 at 0:01
• 1 I dont mind how I do it, I just wanted to be able to do multiple files at once. @cartant – daniel aagentah Commented Oct 27, 2016 at 0:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

If you want to create a bundle for each file you need to loop over the respective files, create a stream for each file and then merge the streams afterwards (using merge-stream):

var merge = require('merge-stream');

gulp.task("bundle", function () {
  var files = [ "main", "otherPage", "otherPage2" ];
  return merge(files.map(function(file) {
    return browserify({
        entries: "./app/" + file + ".jsx",
        debug: true
    }).transform(reactify)
        .bundle()
        .pipe(source(file + ".js"))
        .pipe(gulp.dest("app/dist"))
  }));
});

The above requires that you maintain a list of files manually as an array. It's also possible to write a task that bundles all .jsx files in the app directory without having to maintain an explicit array of the files. You just need the glob package to determine the array of files for you:

var merge = require('merge-stream');
var glob = require('glob');
var path = require('path');

gulp.task("bundle", function () {
  var files = glob.sync('./app/*.jsx');
  return merge(files.map(function(file) {
    return browserify({
        entries: file,
        debug: true
    }).transform(reactify)
        .bundle()
        .pipe(source(path.basename(file, '.jsx') + ".js"))
        .pipe(gulp.dest("app/dist"))
  }));
});

本文标签： javascriptGulp BundleBrowserify on multiple filesStack Overflow