如何制作Gulp手表监控文件？

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);

第一项是(a)$ gulp build-less)工作正常。该 watchFiles ($ gulp watch-files)可以启动，并且不会引起任何错误，但在这个过程中，对 public/less/style.less 被忽略了。

这时有什么问题呢？gulpfile.js 以及如何获得 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() 回调 因为按照你的写法，你有一个比赛条件，其中包括 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;

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