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

我忘了回来...
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 2

我自己为此苦苦挣扎。

令我头疼的是，发现基本上所有内容都随着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 3

可以通过事件使用

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

exports.default = gulp.series(watch);

Answer 4

以防万一其他人偶然发现（就像我一样），试图解决Gulp升级后无法正常工作的问题，我发现实际上只有两件事对我很重要（尝试了数百次之后）-

“ \\”路径分隔符在Windows上不再起作用。 “ /”是唯一的方法。这是我最长的痛苦点。无论如何，这样做可能更好，因为它可以跨平台运行-但当时我只在Windows项目中。
如果要调用任务系列或返回承诺，请确保发出回调。对我而言，确切何时需要它并不明显，而将其遗忘给我造成了极大的痛苦。就像这样：

gulp.task('js', (done) => {
    gulp.src(src)
        .pipe(task())
        .pipe(task(etc))
        //etc
        .pipe(gulp.dest(dst));
    done();
});

在上面的示例中，我特别使用了旧样式，以演示它的使用与否无关紧要。 Gulp非常宽容，但是它对回调和路径一无所知。我认为路径问题实际上与chokidar或gulp使用的某些子模块有关。

希望这可以减轻某人的痛苦。

Answer 5

对于我的ionic v1项目（我知道，现在已经过时了），我不得不将gulp文件更改为以下内容，以与v4更改保持同步。请注意，您必须观看的每个任务都必须预先定义（如果使用ES6，则要特别注意吊装）：

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('sass', function(done) {
  gulp.src('./scss/*.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({extname: '.min.css'}))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function () {
  gulp.watch(paths.sass, gulp.series('sass'));
});

gulp.task('default', gulp.series('watch'));

，然后您可以通过在CLI中运行gulp来进行监视（这将使其运行gulp default，而后者依次运行gulp watch，后者将监视其中的任何scss文件中的任何更改给定目录，并为每次更改运行sass任务）

Gulp v4观看任务

5 个答案: