更改 .less 文件时 Gulp 4 browsersync 不会刷新

Question

Github 仓库链接：https://github.com/Greatshock/Netcracker-Study-Course/blob/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

我不喜欢这种hackaround，因为对我来说它说我们的一个插件不能正常工作（浏览器同步），所以我们用那个坏掉的插件来纠正它。我可能会尝试 browserify。

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 - 这也可能是 src 与 watch dir 不同的 dir 问题。对于不同的文件夹，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')); 如果添加到 gulp 命令中，则在任何其他文件发生更改时重新加载 base.less。 :D