Gulp 4 browsersync не обновляется при изменении.less файла

Question

Ссылка на репозиторий Github: https://github.com/Greatshock/Netcracker-Study-Course/tree/f9bfb413929feec51064a78abf1450845f867186

У меня есть файл с именем base.lessгде все стили @import-ed. Когда я бегу gulpfile (npm run dev), все строится, браузер открывает страницу. Однако, когда я изменяю содержимое одной из импортированных таблиц стилей, browsersync просто пишет в консоли File event [change] : dist/base.css и ничего не происходит (даже base.css на самом деле не меняется). Обратите внимание, что если я изменю base.less непосредственно написав какой-то стиль, все работает отлично.

Вот мой gulpfile.js, Кто-нибудь может увидеть ошибку?

'use strict';

const gulp         = require('gulp'),
      del          = require('del'),
      autoprefixer = require('gulp-autoprefixer'),
      less         = require('gulp-less'),
      cleanCSS     = require('gulp-clean-css'),
      gulpIf       = require('gulp-if'),
      sourceMaps   = require('gulp-sourcemaps'),
      browserSync  = require('browser-sync').create();

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

gulp.task('less', () => {
    return gulp.src('src/assets/themes/base/base.less')
        .pipe(gulpIf(isDevelopment, sourceMaps.init()))
        .pipe(less())
        .on('error', onLessError)
        .pipe(autoprefixer({
            browsers: [
                'last 2 versions',
                'safari 5',
                'ie 10',
                'ie 11'
            ],
            cascade: true
        }))
        .pipe(cleanCSS())
        .pipe(gulpIf(isDevelopment, sourceMaps.write()))
        .pipe(gulp.dest('prod'));
});

gulp.task('images', () => {
    return gulp.src('src/assets/themes/base/images/**/*.*', {base: 'src/assets/themes/base', since: gulp.lastRun('images')})
        .pipe(gulp.dest('prod'));
});

gulp.task('index', () => {
    return gulp.src('src/index.html', {since: gulp.lastRun('index')})
        .pipe(gulp.dest('prod'));
});

gulp.task('clean', () => {
    return del('prod');
});

gulp.task('build', gulp.series('clean', gulp.parallel('less', 'images', 'index')));

gulp.task('watch', () => {
    gulp.watch('src/assets/themes/base/**/*.less', gulp.series('less'));
    gulp.watch('src/assets/themes/base/images/**/*.*', gulp.series('images'));
    gulp.watch('src/index.html', gulp.series('index'));
});

gulp.task('serve', function() {

    browserSync.init({
        server: 'prod'
    });

    browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});

gulp.task('dev', gulp.series('build', gulp.parallel('watch', 'serve')));

/***HELPERS FUNCTIONS***/
function onLessError(error) {
    console.error(error.message);
    this.emit('end');
}

Answer 1

Мне не нравится этот взлом, потому что для меня он говорит, что один из наших плагинов не работает правильно (синхронизация с браузером), поэтому мы исправляем его с помощью этого сломанного плагина. Возможно, я бы попробовал взбеситься вместо этого.

gulp.task('serve', function() {

browserSync.init({
    files: [
        {
            match: ['src/assets/themes/base/**/*.less'],
            fn:    function (event, file) {
                this.reload()
            }
        }
    ],
    server: 'prod'
});

browserSync.watch('prod/**/*.*').on('change', browserSync.reload);
});

edit - это также может быть проблемой dir, когда src отличается от dir watch. src/assets/themes/base/**/*.less' должно быть src/assets/themes/**/*.less' или же src/assets/themes/base/*.less' для отдельной папки.

Редактировать 2- gulp.watch('src/assets/themes/base/*.less', gulp.series('less')); перезагружает base.less, когда любой другой файл изменяется при добавлении в команду gulp.:D