gulp : browserify then concat files

Question

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

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