File is not being compiled after the second change on watch mode

[lincolnlemos]

Hey! Thank you for the project.

I'm not an expert in Gulp, but I'm trying to compile my Mjml templates with mustache and BrowserSync.

The issue is because, after the first compilation using a watch mode, the mustache doesn't transpile anymore. I started to see the handlebars instead of the HTML transpiled.

// process mjml files and return the stream.
gulp.task('mjml', () => gulp.src('./templates/*.mjml')
    .pipe(mjml())
    .pipe(mustache(variables))
    .pipe(gulp.dest('./build')))

// create a task that ensures the `mjml` task is complete before
// reloading browsers
gulp.task('mjml-watch', ['mjml'], (done) => {
  browserSync.reload()
  done()
})

// use default task to launch Browsersync and watch JS files
gulp.task('default', ['mjml'], () => {

  // Serve files from the root of this project
  browserSync.init({
      server: {
          baseDir: "./build/",
      },
  })

  // add browserSync.reload to the tasks array to make
  // all browsers reload after tasks are complete.
  gulp.watch('./templates/*.mjml', ['mjml-watch'])
})

Any thoughts on what can be?

[lincolnlemos]

Any thoughts @rogeriopvl ?

[cristianofromagio]

@lincolnlemos Late response but the syntax for arrays of synchronous tasks (e.g. gulp.task('default', ['mjml'], () => {})) is from Gulp.js 3. The latest Gulp.js (+4.x) introduces the series() and parallel() methods to combine tasks (see more info on changes here). Your example code would became something like:

// process mjml files and return the stream.
gulp.task('mjml', () => gulp.src('./templates/*.mjml')
    .pipe(mjml())
    .pipe(mustache(variables))
    .pipe(gulp.dest('./build')))

// create a task that ensures the `mjml` task is complete before
// reloading browsers
gulp.task('mjml-watch', gulp.series('mjml', (done) =>
  browserSync.reload()
  done()
))

// use default task to launch Browsersync and watch JS files
gulp.task('default', gulp.series('mjml', () => {

  // Serve files from the root of this project
  browserSync.init({
      server: {
          baseDir: "./build/",
      },
  })

  // add browserSync.reload to the tasks array to make
  // all browsers reload after tasks are complete.
  gulp.watch('./templates/*.mjml', gulp.series('mjml-watch'))
}))

Gulp.js 4 also allows to write task methods as ES6 modules, which is the API used here for a minimal BrowserSync setup with Gulp 4.