Gulp v4 监视任务答案

【问题标题】：Gulp v4 watch taskGulp v4 监视任务
【发布时间】：2021-03-15 22:50:22
【问题描述】：

我刚刚升级到 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 总是运行良好。

有人可以向我解释我做错了什么吗？

【问题讨论】：

标签： npm gulp postcss

【解决方案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
});

【讨论】：

密钥是gulp.series 部分。

【解决方案2】：

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

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;

【讨论】：

你确定这是有效的 Gulp v4 语法吗？您没有使用内置的 exports 变量来声明和公开任务。

【解决方案3】：

可以通过事件使用

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

exports.default = gulp.series(watch);

【讨论】：

【解决方案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 正在使用的某些子模块有关。

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

【讨论】：

【解决方案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 文件的任何更改并运行 @ 987654325@每次更改的任务）

【讨论】：