как вывести несколько пакетов с browserify и gulp

у меня есть browserify, связывающий файлы, и он отлично работает. Но что если мне нужно создать несколько комплектов?

Я хотел бы закончить с dist/appBundle.js и dist/publicBundle.js

gulp.task("js", function(){

    return browserify([
            "./js/app.js",
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./dist"));

});

очевидно, что это не сработает, так как я указываю только один выход (bundle.в JS). Я могу сделать это, повторяя приведенное выше утверждение так (но это не кажется правильным из-за повторения):

gulp.task("js", function(){

    browserify([
            "./js/app.js"
        ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest("./dist"));


    browserify([
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("publicBundle.js"))
        .pipe(gulp.dest("./dist"));

});

есть ли лучший способ справиться с этой проблемой? Спасибо!

30
browserify gulp javascript node.js npm

3 ответов

у меня нет хорошей среды для тестирования этого прямо сейчас, но я предполагаю, что это будет выглядеть примерно так: 

gulp.task("js", function(){
    var destDir = "./dist";

    return browserify([
        "./js/app.js",
        "./js/public.js"
    ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest(destDir))
        .pipe(rename("publicBundle.js"))
        .pipe(gulp.dest(destDir));

});

EDIT: я только что понял, что неправильно прочитал вопрос, должно быть два отдельных пакета, исходящих из двух отдельных .файлы js. В свете этого лучшая альтернатива, которую я могу придумать, выглядит так:

gulp.task("js", function(){
    var destDir = "./dist";

    var bundleThis = function(srcArray) {
        _.each(srcArray, function(source) {
            var bundle = browserify(["./js/" + source + ".js"]).bundle();
            bundle.pipe(source(source + "Bundle.js"))
                  .pipe(gulp.dest(destDir));
        });
    };

    bundleThis(["app", "public"]);
});
23

несколько пакетов с общими зависимостями

недавно я добавил поддержку нескольких пакетов с общими зависимостями в https://github.com/greypants/gulp-starter

вот массив browserify конфигурация объектов Я перехожу к моему задач browserify. В конце этой задачи, я перебирать каждый файл конфигурации, browserifying все вещи.

config.bundleConfigs.forEach(browserifyThis);

browserifyThis принимает объект bundleConfig и запускает browserify (с watchify, если режим dev).

Это бит, который сортирует общие зависимости:

// Sort out shared dependencies.
// b.require exposes modules externally
if(bundleConfig.require) b.require(bundleConfig.require)
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if(bundleConfig.external) b.external(bundleConfig.external)

эта задача browserify также правильно отчеты, когда все пакеты закончены (приведенный выше пример не возвращает потоки или не запускает обратный вызов задачи) и использует watchify когда в devMode для супер быстрых перекомпиляций.

последнее замечание Брайана Фитцджеральда-это место. Помните, что это просто JavaScript!

3
gulp.task("js", function (done) {
  [
    "app",
    "public",
  ].forEach(function (entry, i, entries) {
    // Count remaining bundling operations to track
    // when to call done(). Could alternatively use
    // merge-stream and return its output.
    entries.remaining = entries.remaining || entries.length;

    browserify('./js/' + entry + '.js')
      .bundle()
      // If you need to use gulp plugins after bundling then you can
      // pipe to vinyl-source-stream then gulp.dest() here instead
      .pipe(
        require('fs').createWriteStream('./dist/' + entry + 'Bundle.js')
        .on('finish', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});

это похоже на ответ @urban_racoons, но с некоторыми улучшениями:

  • этот ответ потерпит неудачу, как только вы хотите, чтобы задача была зависимостью от другой задачи в gulp 3 или частью серии в gulp 4. Этот ответ использует обратный вызов для сигнала завершения задачи.
  • JS может быть проще и не требует подчеркивания.

этот ответ основан на предпосылке наличия известного списка файлов ввода для каждого пакета, в отличие от чтобы, скажем, собрать список входных файлов.

3