gulp : browserify 然后连接文件

Question

我需要浏览一个文件，然后将包与另一个文件连接起来。我尝试了下面的 gulp 代码，但它无法正常工作。
当我在 mymodule.js 中进行更改并运行 gulp 时，这些更改会出现在捆绑文件中，但不会出现在串联文件中，除非我第二次运行 gulp。
就像连接步骤不等待捆绑步骤完成并获取之前浏览器化的捆绑一样。由于我是 gulp 的初学者，我确信我的 gulp 逻辑有问题......

我的吞咽文件是：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');

gulp.task('default', function() {
  var b = browserify('src/mymodule.js')
  .bundle()
  .pipe(source('mymodule-bundle.js'))
  .pipe(gulp.dest('src'));

  gulp.src([
        'bower_components/porthole/src/porthole.min.js',
        'src/mymodule-bundle.js'
    ])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist'));
});

谢谢

Answer 1

就像 concat 步骤不等待捆绑步骤完成并获取之前浏览器化的捆绑包一样

这正是发生的情况。Gulp 以异步方式工作并具有最大并发性，因此除非您告诉它等待某些内容，否则所有内容都会立即开始运行。

您可以将任务拆分为两个任务，并向 Gulp 提示一个任务依赖于另一个任务：

gulp.task('bundle', function() {
  return browserify('src/mymodule.js')
   .bundle()
   .pipe(source('mymodule-bundle.js'))
   .pipe(gulp.dest('src'));
});

gulp.task('default', ['bundle'], function() {
  return gulp.src([
    'bower_components/porthole/src/porthole.min.js',
    'src/mymodule-bundle.js'
  ])
  .pipe(concat('app.js'))
  .pipe(gulp.dest('dist'));
});