Gulp v4 监视任务

Question

我刚刚升级到 Gulp v4，想知道为什么我的 gulpfile 不再工作了。
我尝试了新文档的新代码，但没有按计划运行，因为我使用的是 "pure" postcss.
所以我用谷歌搜索了我的问题，发现了这个问题：
但是，这也不是我的问题的解决方案，尽管我收到相同的错误消息 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

在阅读了文档之后，更重要的是，理解了它，我能够自己弄明白了。

const autoprefixer = require('autoprefixer');
const babel = require('gulp-babel');
const cssdeclarationsorter = require('css-declaration-sorter');
const cssnano = require('cssnano');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');

const paths = {
    'styles': {
        'base': 'src/styles/',
        'src': 'src/styles/main.scss',
        'dest': 'dist/styles/',
        'watch': 'src/styles/**/*.scss',
    },
    'scripts': {
        'base': 'src/scripts/',
        'src': 'src/scripts/**/*.js',
        'dest': 'dist/scripts/',
        'watch': 'src/scripts/**/*.js',
    },
};

const styles = function () {
    const plugins = [
        autoprefixer(),
        cssdeclarationsorter(),
        cssnano(),
    ];

    return gulp.src(
        paths.styles.src,
        {
            'base': paths.styles.base,
        }
    ).
        pipe(sass().on(
            'error',
            sass.logError
        )).
        pipe(postcss(plugins)).
        pipe(rename({
            'basename': 'styles',
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.styles.dest));
};

const scripts = function () {
    return gulp.src(
        paths.scripts.src,
        {
            'base': paths.scripts.base,
        }
    ).
        pipe(babel()).
        pipe(uglify()).
        pipe(rename({
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.scripts.dest));
};

const watch = function () {
    gulp.watch(
        paths.scripts.watch,
        scripts
    );
    gulp.watch(
        paths.styles.watch,
        styles
    );
};

const build = gulp.parallel(
    styles,
    scripts,
    gulp.series(watch)
);

exports.default = build;

对于模块

import autoprefixer from 'autoprefixer';
import babel from 'gulp-babel';
import cssdeclarationsorter from 'css-declaration-sorter';
import cssnano from 'cssnano';
import gulp from 'gulp';
import postcss from 'gulp-postcss';
import rename from 'gulp-rename';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';

const paths = {
    'styles': {
        'base': 'src/styles/',
        'src': 'src/styles/main.scss',
        'dest': 'dist/styles/',
        'watch': 'src/styles/**/*.scss',
    },
    'scripts': {
        'base': 'src/scripts/',
        'src': 'src/scripts/**/*.js',
        'dest': 'dist/scripts/',
        'watch': 'src/scripts/**/*.js',
    },
};

export const styles = function () {
    const plugins = [
        autoprefixer(),
        cssdeclarationsorter(),
        cssnano(),
    ];

    return gulp.src(
        paths.styles.src,
        {
            'base': paths.styles.base,
        }
    ).
        pipe(sass().on(
            'error',
            sass.logError
        )).
        pipe(postcss(plugins)).
        pipe(rename({
            'basename': 'styles',
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.styles.dest));
};

export const scripts = function () {
    return gulp.src(
        paths.scripts.src,
        {
            'base': paths.scripts.base,
        }
    ).
        pipe(babel()).
        pipe(uglify()).
        pipe(rename({
            'suffix': '.min',
        })).
        pipe(gulp.dest(paths.scripts.dest));
};

export const watch = function () {
    gulp.watch(
        paths.scripts.watch,
        scripts
    );
    gulp.watch(
        paths.styles.watch,
        styles
    );
};

const build = gulp.parallel(
    styles,
    scripts,
    gulp.series(watch)
);

export default build;

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 项目。
如果您正在调用任务系列或 return 承诺，请确保发出回调。对我来说，什么时候需要它并不明显，遗漏它给我带来了很大的痛苦。是这样的：

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 中运行ning gulp 观看（这导致它运行 gulp default，这又运行s gulp watch，监视给定目录中任何 scss 文件的任何更改，并且运行s sass task for every change)

Gulp v4 监视任务

Gulp v4 watch task

npm

gulp

postcss