Issue with asynchronous build task in gulp

Question

EDIT : it appears the pretty:true from Jade is from where the problem comes from. any idea why ?

I've got a bit of trouble here. Let me explain what I'm trying to do :

Here is what is supposed to happens:

file.jade > intermediate.html > index.html

The jade file outputs a html, then the html outpus a minified html. All in the watch function of course.

What I wrote to achieve this effect:

/* ===== TEMPLATES ===== */
gulp.task('templates', function() {

  gulp.src(src + '/*.jade')
    .pipe(jade({ locals: {data: data}, pretty:true}))
    .pipe(rename('intermediate.html'))
    .pipe(gulp.dest(src));
})
/* ===== HTML ===== */
gulp.task('html', function() {
  // Get file
    return gulp.src('./src/intermediate.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(inject(gulp.src([src + '/responsive.css']), {
        starttag: '<!-- inject:head:{{ext}} -->',
        transform: function (filePath, file) {
          // return file contents as string
          return file.contents.toString('utf8')
        }
      }))
        .pipe(rename('index.html'))
        .pipe(minifyHTML(options))
        // Output file
        .pipe(gulp.dest(archive))
        .pipe(gulp.dest(dest));
});
/* ===== WATCH ===== */
gulp.task('watch', function() {
    // Folders to watch and tasks to execute
    gulp.watch([src + '/template.jade'], ['default']);

});

/* ===== DEFAULT ===== */
// Default gulp task ($ gulp)
gulp.task('default', function(callback) {
  runSequence('clean',
              'templates',
              'html',
              'notify',
              callback);
});

Now what happens when a build happens ? file.jade outputs intermediate.html but index.html is produced with the OLD intermediate.html version, before its produced by the jade template. It's a bit tricky to explain.

What I mean is I need to do 2 gulp in a row every time to get the up to date index.html ! Because index.html takes the intermediate.html version that exists BEFORE the template is compiled from jade. I hope I'm being clear enough

I thought it would be ok with a runsequence but it doesn't seem to be !

Answer 1

I'm not a pro but those return s look problematic. If you're doing asynchronous stuff you need to use callbacks. It is likely skipping over the return statements altogether, or running them after everything else.

 gulp.task('html', function() { // Get file gulp.src('./src/intermediate.html') .pipe(inlineCss({ applyStyleTags: true, applyLinkTags: true, removeStyleTags: true, removeLinkTags: true })) .pipe(inject(gulp.src([src + '/responsive.css']), { starttag: '<!-- inject:head:{{ext}} -->', transform: function (filePath, file) { // return file contents as string file.contents.toString('utf8') } })) .pipe(rename('index.html')) .pipe(minifyHTML(options)) // Output file .pipe(gulp.dest(archive)) .pipe(gulp.dest(dest)); }); 

Disclaimer: I've never used gulp.

Also, is your console printing any errors or warnings?

Answer 2

This is pretty much a Grunt construction where you output to disk and pick it up in another task. You want to keep these things in one stream without writing the intermediate to disk in Gulp.

Since it all sequential anyway, why not run it through one pipeline? Template and html should be combined into one gulp task imo. The author of Gulp also confirms this here: How can I pipe stream between tasks #69

If you really want the logic to be separated, you could use lazypipe to construct two pipes beforehand (or even return them from a utility).

Option 2

If you're adamant about keeping these tasks as two parts or files, you can write them as two gulp plugins and pipe from one to another. Though this seems overengineering to me, it's a possibility. How to write a gulp plugin .