javascript - 从 v3 迁移到 v4 后如何让 Gulp watch 工作？

Question

我有一个 gulpfile 非常适中的应用程序。我刚刚将 Gulp 从 v3.9.1 升级到 v4.0.2 并调整了 gulpfile.js。所有任务都再次正常工作，只有 watching 不正常。

没有错误，但 Gulp watch 似乎没有检查定义文件的更改:

$  gulp -v
CLI version: 2.2.0
Local version: 4.0.2
$ gulp
[11:39:34] Using gulpfile /var/www/.../my-app/gulpfile.js
[11:39:34] Starting 'default'...
[11:39:34] Starting 'run'...
[11:39:34] Starting 'build-less'...
[11:39:34] Finished 'build-less' after 16 ms
[11:39:34] Starting 'build-vendors'...
[11:39:34] Finished 'build-vendors' after 5.5 ms
[11:39:34] Finished 'run' after 23 ms
[11:39:34] Starting 'watch-files'...
[11:39:34] Starting 'watchFiles'...

如何让 Gulp watch 为 Gulp v4 工作？

---

这是我为 Gulp v3 编写的原始 gulpfile.js:

/**
 * Gulp File
 *
 * run `gulp run && gulp watch-files` on the command line
 */

// Include Gulp plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    watch = require('gulp-watch'),
    prefix = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    path = require('path')
;

// Compile LESS to CSS
gulp.task('build-less', function() {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    gulp.src('./public/less/*.less') // path to less file
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/')) // path to css directory
    ;
});

// Get vendors' code
gulp.task('build-vendors', function() {
    gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
        .pipe(plumber())
        .pipe(less())
        .pipe(rename(function (path) {
            //rename all files except 'bootstrap.css'
            if (path.basename + path.extname !== 'bootstrap.css') {
                path.basename = 'bootstrap-' + path.basename;
            }
        }))
        .pipe(gulp.dest('./public/css')) // path to css directory
    ;
});

// Run the build process
gulp.task('run', ['build-less', 'build-vendors']);

// Watch all LESS files, then run build-less
gulp.task('watch', function() {
    gulp.watch('public/less/*.less', ['run'])
});

// Default will run the 'entry' task
gulp.task('default', ['watch', 'run']);

这是 Gulp v4 的新变体:

/**
 * Gulp File
 *
 * run `gulp run && gulp watch-files` on the command line
 */

// Include Gulp plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    watch = require('gulp-watch'),
    prefix = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    path = require('path')
;

// Compile LESS to CSS
function buildLess(done) {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    gulp.src('./public/less/*.less') // path to less file
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/')) // path to css directory
    ;
    done();
};

// Get vendors' code
function buildVendors(done) {
    gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
        .pipe(plumber())
        .pipe(less())
        .pipe(rename(function (path) {
            //rename all files except 'bootstrap.css'
            if (path.basename + path.extname !== 'bootstrap.css') {
                path.basename = 'bootstrap-' + path.basename;
            }
        }))
        .pipe(gulp.dest('./public/css')) // path to css directory
    ;
    done();
};

// Watch all LESS files, then run build-less
function watchFiles() {
    return gulp.watch(['public/less/*.less'], gulp.series('build-less'));
};

gulp.task('build-less', buildLess);
gulp.task('build-vendors', buildVendors);
gulp.task('run', gulp.series('build-less', 'build-vendors'));
gulp.task('watch-files', gulp.series(watchFiles));
gulp.task('default', gulp.series('run', 'watch-files'));

Answer 1

我刚刚测试过，效果很好

我确实在全局安装了最新版本的 gulp

npm install gulp -g

gulp -v CLI
版本:2.2.0
本地版本:4.0.2

然后

gulp 运行监视文件

它会在任何更改后更新 css 文件

所以我建议使用 path 包而不是静态地写文件夹的路径。

示例:

path.resolve(__dirname, "foo/bar/less/");