Question

15

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

rated 0 times [ 17] [ 2] / answers: 1 / hits: 23910 / 10 Years ago, mon, september 29, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

answered 10 Years ago byrondonavanc · Accepted Answer

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.