Как выводить несколько пакетов с помощью браузера и gulp

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

Я хотел бы получить 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"));

});

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

Ответы

Ответ 1

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

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"]);
});

Ответ 2

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

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

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

config.bundleConfigs.forEach(browserifyThis);

browserifyThis берет объект bundleConfig и запускает браузер (с проверкой, если режим 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)

Эта задача также корректно отображает отчеты, когда все пакеты завершены (приведенный выше пример не возвращает потоки или не запускает обратный вызов задачи), и использует 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 может быть проще и не требует подчеркивания.

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