gulp: 将文件通过browserify打包再合并

Question

我需要将一个文件进行browserify，然后将其与另一个文件合并。我尝试了下面的gulp代码，但它无法正常工作。
当我更改mymodule.js并运行gulp时，这些更改会出现在bundle文件中，但不会出现在合并的文件中，除非我再次运行gulp。
就好像合并步骤没有等待 bundle 步骤完成并使用先前 browserify 的 bundle 一样。 由于我是gulp的初学者，我确定我的gulp逻辑有问题...

我的gulpfile如下：

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'));
});

谢谢

- Maxime Freschard

Answer 1

就好像concat步骤没有等待bundle步骤完成并获取先前的browserified bundle一样。

确实是这样。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'));
});

- Sven Schoenung

Answer 2

尝试这个：

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

var paths = [
 'bower_components/porthole/src/porthole.min.js',
 'src/mymodule-bundle.js'
];

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

gulp.task('default2', function() {
 return gulp.src(paths)
  .pipe(concat('app.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('final', ['default', 'default2']);

每次想要创建捆绑包时，请运行最终任务。

- Prototype

Answer 3

实际上，你不需要像其他答案中提到的那样拆分你的任务：

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

gulp.task('default', function () {
    var b = browserify('src/mymodule.js')
            .bundle()
            .pipe(source('mymodule-bundle.js'))
            .pipe(buffer())
            // remove this line if you don't need 'mymodule-bundle.js' to be saved at all 
            .pipe(gulp.dest('src'));

    return merge(b, gulp.src('bower_components/porthole/src/porthole.min.js'))
           .pipe(concat('app.js'))
           .pipe(gulp.dest('dist'));
});

- fabmlk