如何制作杯表监控文件？

Question

我有一个简单的gulpfile.js，它只定义了两个任务，buildLess和watchFiles

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

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

function watchFiles() {
    gulp.watch(['public/less/*.less'], gulp.series('build-less'));
    // gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};

gulp.task('build-less', buildLess);
gulp.task('watch-files', watchFiles);

第一个($ gulp build-less)很好地工作。watchFiles ($ gulp watch-files)可以启动，不会导致任何错误，但public/less/style.less上的更改将被忽略。

这个gulpfile.js watch-files 有什么问题，以及如何使watch-files任务工作？

Answer 1

gulp.series API允许您传递以前注册的任务的字符串。在您的代码中，还没有注册build-less。

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

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

gulp.task('build-less', buildLess);

function watchFiles() {
    gulp.watch(['public/less/*.less'], gulp.series('build-less'));
    // gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};

gulp.task('watch-files', watchFiles);

我要指出的是，Gulp不再建议使用gulp.task API来注册任务，而是使用exports。

其次，您不需要gulp-watch，因为gulp现在附带了自己的gulp.watch方法(您已经在使用该方法)。

最后，您应该确保在您的正确传递异步完成信号函数中使用buildLess。下面，我将该函数更改为回溯溪流，而不是回调，因为在编写它时，您有一个可能在较少编译完成之前调用done()的争用条件。

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

function buildLess() {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    return gulp
        .src('./public/less/*.less')
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/'));
}
exports['build-less'] = buildLess;

function watchFiles() {
    gulp.watch(['public/less/*.less'], buildLess);
}
exports['watch-files'] = watchFiles;

总的来说，我会通过古普氏文献。他们最近更新了他们的网站，并随之更新了他们的文档。通过这些可以澄清你可能会遇到的其他一些问题。