Как заставить Gulp смотреть файлы мониторинга? - PullRequest
Новая
       71

Как заставить Gulp смотреть файлы мониторинга?

0 голосов
/ 16 июня 2020

У меня есть простой 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 работать?

1 Ответ

0 голосов
/ 16 июня 2020

API gulp.series позволяет передавать строку ранее зарегистрированной задачи . В своем коде вы еще не зарегистрировали 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 (которым вы являетесь уже используется).

Наконец, вы должны убедиться, что ваш правильно сигнализирует asyn c завершении в вашей функции buildLess. Ниже я изменил эту функцию на , чтобы вернуть Stream , а не , вызывая done() обратный вызов , поскольку, как вы написали, у вас есть состояние гонки, где done() может будет вызываться до завершения компиляции Less. 

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;

В целом, я бы взял go через документацию Gulp . Они недавно обновили свой сайт и вместе с ним обновили свою документацию. Это может прояснить некоторые другие вопросы, которые могут у вас возникнуть.

...