javascript - Convert gulp watch in gulp@3.9.1 to gulp@4 - Stack Overflow

admin管理员组

文章数量:1384512

We are switching from [email protected] to gulp@4 and are having trouble switching over. When we run gulp watch, we are getting the following errors and trying to figure out how to resolve it.

What is the proper way to convert the gulp watch task to work with gulp@4?

Error message

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

Command: gulp watch

• This should run minify-js then minify-css in order
• minify-js should run after clean-scripts has pleted successfully
• minify-css should run after clean-css has pleted successfully

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']);
});

We are switching from [email protected] to gulp@4 and are having trouble switching over. When we run gulp watch, we are getting the following errors and trying to figure out how to resolve it.

What is the proper way to convert the gulp watch task to work with gulp@4?

Error message

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

Command: gulp watch

• This should run minify-js then minify-css in order
• minify-js should run after clean-scripts has pleted successfully
• minify-css should run after clean-css has pleted successfully

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']);
});

We tried doing this, but it resulted in the 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

Share Improve this question Follow edited Mar 6, 2019 at 22:40 usernameabc asked Mar 6, 2019 at 21:07 usernameabcusernameabc 67411 gold badge1111 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

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

As @Abdaylan suggested, I also advocate switching to functions. Nevertheless, so you can see where your code was wrong, I have fixed it here. Gulp 4 does not use this syntax:

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

Gulp 4:

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

or gulp.parallel. So you can use your gulp.task syntax (rather than named functions) if you modify them to use the signatures that gulp 4 supports as I did in your modified code at the top of this answer.

Gulp 4 with named functions:

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

So with named functions, the tasks are not referred to as strings.

See also task never defined for other potential problems when migrating from gulp3 to gulp4 with the same error message.

I would remend converting your minify-js, minify-css, clean-scripts and clean-css tasks to 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));

I just ran into this a couple days ago myself. What worked for me was to run each task in its own gulp.watch() with the gulp.series() on the watch task call instead of the watch task itself. For example:

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

本文标签： javascriptConvert gulp watch in gulp391 to gulp4Stack Overflow