CODEWITHSUNDEEP
javascriptgulpgulp-4
Clifford Fajardo
Clifford Fajardo

Reputation: 1447

gulp 4.0: run tasks in series

I'm trying to run a set of tasks in series, that is one after the other in Gulp 4.0 however when I add my 3rd task my gulp code breaks.

    gulp.task('concat-js', (done) => {
      gulp.src([  
        'app1.js',
        'app2.js',
      ])
      .pipe(concat("app.js")) 
      .pipe(gulp.dest('build'))
      done();
    });

    gulp.task('concat-css', (done) => {
      gulp.src([
        '.styles1.css',
        '.style2.css'
      ])
      .pipe(concat("app.css"))
      .pipe(gulp.dest('build'))
      done();  
    });

    gulp.task('minify-js', (done) => {
      gulp.src('./build/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('./build/'))
      done();
    })

    //this works & creates /build with the app.js & app.css files
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css',, (done) => {
      done();
    }));

If I delete the build folder to start all over & try adding another task (minfy-js), my third task fails & the build folder also doesn't get created.

    //File not found with singular glob: /Users/user/myapp/build/app.js
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css', 'minify-js', (done) => {
      done();
    }));

Upvotes: 0

Views: 883

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30574

The way you're signalling async completion of your tasks is wrong. Read this answer for an overview of the different ways in which you can signal async completion in gulp.

Basically all the streams that you create via gulp.src() are asynchronous. That means you create the stream and your code immediately returns. However the actual processing of the stream starts only after you exit the task function. In order for gulp to know that you're using a stream and that it has to wait for the stream to finish processing, you need to return the stream from your task.

You're doing something else entirely. You're invoking a callback function done which is another way to signal asynchronous task completion to gulp. However that's the completely wrong way in this case, because when you invoke the callback function done the stream you created hasn't even started to process.

That means gulp thinks your concat-js task has finished, although the code inside your task hasn't even really started running. So when the minify-js task runs your ./build/app.js file hasn't been created yet. Boom. Error.

To fix this always return the streams from your tasks:

gulp.task('concat-js', () => {
  return gulp.src([  
      'app1.js',
      'app2.js',
    ])
    .pipe(concat("app.js")) 
    .pipe(gulp.dest('build'))
});

gulp.task('concat-css', () => {
  return gulp.src([
      '.styles1.css',
      '.style2.css'
    ])
    .pipe(concat("app.css"))
    .pipe(gulp.dest('build'))
});

gulp.task('minify-js', () => {
  return gulp.src('./build/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('./build/'))
})

gulp.task('build-production-static-resource', gulp.series(
  'concat-js', 'concat-css', 'minify-js'
));

Upvotes: 4

Related Questions