I'm using Gulp to collect front-matter (via gulp-front-matter plugin) and then, after aggregating it, I'm saving it into another file. Among other data, I'm saving a bunch of CSS. Here's what I have for my compileCSS task:

var collected = [];

gulp.src('./client/**/*.html')
  .pipe(frontMatter({ property: 'meta', remove: true }))
  .pipe(through.obj(function(file, enc, callback) {
       var css = file.meta;
       collected.push(css);
   }))
   .pipe(gulp.dest('./build/templates'))
   .on('end', function() {
       var cssPath = ['build', 'assets', 'css', 'compiled.css'];
       fs.writeFileSync(cssPath.join(path.sep), cssPath);
   })

;

The task works as expected (note, it's a simplified version). Everything works as expected and I get a compiled.css file with all of the front-matter CSS. However, I found a need to use the Prefixer not only on my regular css file but on this new compiled.css as well. So I created a prefix task:

gulp.task('prefix', ['compileCSS', 'copy'], function() {
    gulp.src('./build/assets/css/*.css')
        .pipe(autoprefixer({ browsers: ['last 3 versions'] }))
        .pipe(gulp.dest('build'))
    ;
});

Now, the problem is that the on('end' function runs at the end of ALL the tasks, not just the compileCSS task.

My question is, is there a way to inject an "on end" type task for each task? Or is there a way to use streams somehow (since the last task isn't an actual stream and doesn't take advantage of it, I don't see how).

I'm using Gulp to collect front-matter (via gulp-front-matter plugin) and then, after aggregating it, I'm saving it into another file. Among other data, I'm saving a bunch of CSS. Here's what I have for my compileCSS task:

var collected = [];

gulp.src('./client/**/*.html')
  .pipe(frontMatter({ property: 'meta', remove: true }))
  .pipe(through.obj(function(file, enc, callback) {
       var css = file.meta;
       collected.push(css);
   }))
   .pipe(gulp.dest('./build/templates'))
   .on('end', function() {
       var cssPath = ['build', 'assets', 'css', 'compiled.css'];
       fs.writeFileSync(cssPath.join(path.sep), cssPath);
   })

;

The task works as expected (note, it's a simplified version). Everything works as expected and I get a compiled.css file with all of the front-matter CSS. However, I found a need to use the Prefixer not only on my regular css file but on this new compiled.css as well. So I created a prefix task:

gulp.task('prefix', ['compileCSS', 'copy'], function() {
    gulp.src('./build/assets/css/*.css')
        .pipe(autoprefixer({ browsers: ['last 3 versions'] }))
        .pipe(gulp.dest('build'))
    ;
});

Now, the problem is that the on('end' function runs at the end of ALL the tasks, not just the compileCSS task.

My question is, is there a way to inject an "on end" type task for each task? Or is there a way to use streams somehow (since the last task isn't an actual stream and doesn't take advantage of it, I don't see how).

• javascript
• node.js
• gulp

• Is it not just that they're running concurrently because you haven't provided a callback? github.com/gulpjs/gulp/blob/master/docs/recipes/… – RichieAHB Commented Sep 29, 2014 at 13:24

2 Answers 2

It wasn't the sequence that was the problem, I wasn't returning the stream which created a race condition so a fix like this worked:

return gulp.src('./client/**/*.html')
          .pipe(dosomething());
  \\ all other code

I guess the problem was that Gulp waits for a stream to be done before setting off the next event. Without returning streams or promises, Gulp simply runs the task and doesn't wait for it to finish.

You can try run-sequence:

var runSequence = require('run-sequence');
gulp.task('mytask', function(cb) {
  runSequence(
    ['parallel1', 'parallel2'],
    'seq1',
    'seq2',
    cb
  );
});

If you want something more related to your gulpfile, you should include it to your question.