gulp : browserify then concat files

问题:

I need to browserify a file, and then to concat the bundle with another file. I tried the gulp code below but it's not working properly.
When I make changes in mymodule.js and run gulp, those changes appear in the bundle file but not in the concatenated file, unless I run gulp a second time.
It's like if the concat step is not waiting for the bundle step to finish and take the previously browserified bundle. As I'm a beginner with gulp, I'm sure there is something wrong with my gulp logic...

My gulpfile is :

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

Thanks

回答1:

It's like if the concat step is not waiting for the bundle step to finish and take the previously browserified bundle

That's exactly what happens. Gulp works asynchronously and with maximum concurrency so unless you tell it to wait for something everything will just start running immediately.

You can split up your task into two tasks and hint to Gulp that one depends on the other:

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

回答2:

Try this:

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

And run task final every time you want to create a bundle.

回答3:

Actually you don't need to split up your task as mentioned in other answers :

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

文章来源: gulp : browserify then concat files