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

编辑 - 这也可能是一个dir问题，其中src与watch dir不同。 <{1}}对于不同的文件夹应为src/assets/themes/base/**/*.less'或src/assets/themes/**/*.less'。

如果添加到gulp命令，则更改任何其他文件时，编辑2- src/assets/themes/base/*.less'会重新加载base.less。：d

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

1 个答案: