CODEWITHSUNDEEP
javascriptnode.jsgulp
antjanus
antjanus

Reputation: 997

How do you run a gulp "on end" task but only at the end of the current task?

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).

Upvotes: 5

Views: 24456

Answers (2)

antjanus
antjanus

Reputation: 997

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.

Upvotes: 10

Florent
Florent

Reputation: 12420

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.

Upvotes: 7

Related Questions