Update the gulp watch function to use gulp@4

Question

Update the gulp watch function to use gulp@4

We are currently in the process of transitioning from

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9c8e978bbbc8d5c2d5ca">[email protected]</a>

to gulp@4, and encountering difficulties during the switch. Upon running gulp watch, we encountered the errors below and are seeking a solution.

How can we successfully convert the gulp watch task for compatibility with gulp@4?

Error message

AssertionError [ERR_ASSERTION]: Task never defined: minify-css

Command: gulp watch

This should execute minify-js followed by minify-css sequentially
minify-js should be triggered only after successful completion of clean-scripts
minify-css should run after clean-css has successfully executed

Current tasks.

var gulp = require('gulp'),
    cssmin = require('gulp-clean-css'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify');
    
var src = {
  js: 'js/some-dir/**/*.js',
  css: 'css/some-dir/**/*.css'
};

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

gulp.task('clean-css', function() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-css', ['clean-css'], function() {
  gulp.src(src.css)
    .pipe(cssmin())
    .pipe(gulp.dest(dest.css));
});

gulp.task('clean-scripts', function() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-js', ['clean-scripts'], function() {
   gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

gulp.task('watch', ['minify-js', 'minify-css'], function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
});

Although an attempt was made using this code snippet, it resulted in an error message:

gulp.task('watch', gulp.series('minify-js', 'minify-css', function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
}));

javascript css npm gulp

Answer 1

Answer №1

gulp.task('compress-styles', gulp.series('clear-css', function() {
  return gulp.src(source.styles)
    .pipe(cssmin())
    .pipe(gulp.dest(destination.styles));
}));

gulp.task('compress-scripts', gulp.series('clear-js', function() {
   return gulp.src(source.scripts)
       .pipe(uglify())
       .pipe(gulp.dest(destination.scripts));
}));

gulp.task('monitor', gulp.series('compress-scripts', 'compress-styles', function() {
  gulp.watch(source.scripts, gulp.series('compress-scripts'));
  gulp.watch(source.styles, gulp.series('compress-styles'));
}));

In agreement with @Abdaylan, I also recommend moving to functions for more clarity. However, here are the corrections made to your code. It's important to note that Gulp 4 does not utilize the syntax shown below:

gulp.task('someTask', ['task1', 'task2'], function () {});  // gulp 3

Gulp 4:

gulp.task('someTask', gulp.series('task1', 'task2', function () {}));  // gulp 4 with string tasks

or by using gulp.parallel. By adapting your existing syntax to the supported signatures of Gulp 4 as outlined in the modified code above, you can continue utilizing the gulp.task approach.

Gulp 4 with named functions:

gulp.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

With named functions, the tasks are not referenced as strings like before.

For additional reference on migrating from gulp3 to gulp4 and potential errors that may arise, please check out task never defined.

Answer 2

gulp.task('compress-styles', gulp.series('clear-css', function() {
  return gulp.src(source.styles)
    .pipe(cssmin())
    .pipe(gulp.dest(destination.styles));
}));

gulp.task('compress-scripts', gulp.series('clear-js', function() {
   return gulp.src(source.scripts)
       .pipe(uglify())
       .pipe(gulp.dest(destination.scripts));
}));

gulp.task('monitor', gulp.series('compress-scripts', 'compress-styles', function() {
  gulp.watch(source.scripts, gulp.series('compress-scripts'));
  gulp.watch(source.styles, gulp.series('compress-styles'));
}));

In agreement with @Abdaylan, I also recommend moving to functions for more clarity. However, here are the corrections made to your code. It's important to note that Gulp 4 does not utilize the syntax shown below:

gulp.task('someTask', ['task1', 'task2'], function () {});  // gulp 3

Gulp 4:

gulp.task('someTask', gulp.series('task1', 'task2', function () {}));  // gulp 4 with string tasks

or by using gulp.parallel. By adapting your existing syntax to the supported signatures of Gulp 4 as outlined in the modified code above, you can continue utilizing the gulp.task approach.

Gulp 4 with named functions:

gulp.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

With named functions, the tasks are not referenced as strings like before.

For additional reference on migrating from gulp3 to gulp4 and potential errors that may arise, please check out task never defined.

Answer 3

Answer №2

I suggest transforming your minify-js, minify-css, clean-scripts, and clean-css tasks into functions:

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

function cleanCss() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

function minifyCss() {
  return gulp.src(src.css)
             .pipe(cssmin())
             .pipe(gulp.dest(dest.css));
});

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

function minifyJs() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

var minifyJsAndClean = gulp.series(minifyJs, cleanScripts);
var minifyCssAndClean = gulp.series(minifyCss, cleanCss);
var watchers = function (done) {
   gulp.watch(src.js, minifyJs);
   gulp.watch(src.css, minifyCss);
   done();
}

gulp.task('watch', gulp.series(minifyJsAndClean, minifyCssAndClean, watchers));

Answer 4

I suggest transforming your minify-js, minify-css, clean-scripts, and clean-css tasks into functions:

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

function cleanCss() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

function minifyCss() {
  return gulp.src(src.css)
             .pipe(cssmin())
             .pipe(gulp.dest(dest.css));
});

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

function minifyJs() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

var minifyJsAndClean = gulp.series(minifyJs, cleanScripts);
var minifyCssAndClean = gulp.series(minifyCss, cleanCss);
var watchers = function (done) {
   gulp.watch(src.js, minifyJs);
   gulp.watch(src.css, minifyCss);
   done();
}

gulp.task('watch', gulp.series(minifyJsAndClean, minifyCssAndClean, watchers));

Answer 5

Answer №3

A few days back, I faced a similar issue and found a solution that worked well for me. Instead of running all tasks within the same gulp.watch(), I ran each task separately using gulp.series() on the watch task call. Here's an example:

gulp.task('watch', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
});

Answer 6

A few days back, I faced a similar issue and found a solution that worked well for me. Instead of running all tasks within the same gulp.watch(), I ran each task separately using gulp.series() on the watch task call. Here's an example:

gulp.task('watch', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
});

Update the gulp watch function to use gulp@4

Answer №1

Answer №2

Answer №3

Similar questions

Arrange an array of objects based on boolean values first, followed by numerical values in JavaScript

Error message due to an undefined function in Angular datatables Fixed Columns

Steps for connecting data to a react table

JSON.stringify not behaving as anticipated

Creating a Timeless Banner with the Magic of `background:url()`

Model of Objects within a Document

Is it possible to simultaneously toggle buttons and submit a form?

Interactive horizontal slideshow for hyperlinks - bootstrap framework and model-view-controller architecture

Is Express capable of serving static files from a hidden folder with dot file?

Every time I try to create a new React app, I consistently run into the same error

Using conditionals in CMD commands within a Docker environment

Breaking down objects or arrays to extract specific values in React components

Is there a way to modify the style within a TS-File?

Is jQuery.each() failing to function properly in Firefox and Internet Explorer?

How to utilize jQuery to replace the first occurrence of a specific

converting nested object structures in typescript

How can I use PHP to transform a JSON object containing xy coordinates into an image?

Iterating over an array of objects and executing asynchronous operations

Upcoming topics - The Challenge of Staying Hydrated at Basecamp One

Enhance your web form with an auto-suggest textbox that allows for multiple selections,