Gulp v4手表任务

Question

我刚刚升级到Gulp v4，并想知道为什么我的gulpfile不再工作了。 我尝试了新文档的新代码，但它没有按计划进行，因为我使用的是“纯”的postcss。 所以我搜索了我的问题并发现了这个问题：Gulp error: watch task has to be a function 但是，这也不是我的问题的解决方案，虽然我得到相同的错误消息Error: watching src/styles/**/*.scss: watch task has to be a function 我目前有这个代码

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

当我改变 gulp.watch('src/styles/**/*.scss', ['styles']); 至 gulp.watch('src/styles/**/*.scss', gulp.series('styles')); 它只是给了我一个Starting 'default'...和更改文件Starting 'styles'...后 与Gulp 3.9一起

Starting 'default'...
Finished 'default' after 174 ms

并在更改文件后

Starting 'styles'...
Finished 'styles' after 561 μs

我现在尝试了许多不同的东西，但我不能像以前那样让它工作。我真的想要像现在的酷孩子一样切换到webpack。但是Gulp总是很好。 有人可以向我解释我做错了什么吗？

Answer 1

我自己也在努力解决这个问题。

我花了好几个小时的头痛才发现基本上所有东西都随v4.0而变化

我运行这样的代码，它完美地工作......

//Do everything once!
  gulp.task('default', function(){
    gulp.watch('src/styles/*.css', gulp.series('css')),
    gulp.watch('src/html/*.html', gulp.series('copyHTML')),
    gulp.watch('src/js/*.js', gulp.series('scripts')),
    gulp.watch('src/images/*', gulp.series('imageMIN'));
  return
});

Answer 2

我只是忘了回来...... return gulp.watch('src/styles/**/*.scss', gulp.series('styles')); 和 return gulp.src('src/styles/main.scss') 完整代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    return gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

Answer 3

可以通过活动使用

function watch() {
    const watcher = gulp.watch('src/styles/**/*.scss');
    watcher.on('change', function(path, stats) {
        styles(); //styles task
    });
}

exports.default = gulp.series(watch);