当页面重新加载时，或通过 Livereload 重新加载 Gulp 手表

如何解决当页面重新加载时，或通过 Livereload 重新加载 Gulp 手表

我最近遇到了一个令人恼火的问题，我无法弄清楚：当我的 gulp watch 任务正在运行时，如果我手动刷新 Livereload 正在观看的页面，sass 任务将触发（它会声称 screen.css 有被触摸过），然后将继续触发，而我不会在后台对监视的文件进行任何更改，就好像它在累积“监视”，直到 MING 最终崩溃或陷入无法使用的任务。

我注意到的一件事：如果 sass 任务指定了任何目录深度，则会导致错误：

'styles/sass/**/*.scss' (will trigger when partials are touched,or page is refreshed; goes insane eventually) 
'styles/sass/*.scss' (only triggers when screen.scss is touched as expected)

所以我怀疑 sass globbing 有问题。

我尝试过的事情：

• 恢复我所有的 sass 相关或 livereload gulp 包以匹配另一个不这样做的本地站点
• 确保 CMS 没有修改 screen.css（它最初确实有 filemtime()）
• 删除 screen.scss 中的所有部分
• 关闭 Windows 文件历史记录

我的 gulpfile 的简化版本：

    var gulp            = require('gulp');
    var sass            = require('gulp-sass');
    var livereload      = require('gulp-livereload');
    var cleancss        = require('gulp-clean-css');
    var rename          = require('gulp-rename');
    var notify          = require('gulp-notify');
    var plumber         = require('gulp-plumber');
    var autoprefixer    = require('gulp-autoprefixer');
    var sassglob        = require('gulp-sass-glob');
    var sourcemaps      = require('gulp-sourcemaps');

    gulp.task('sass',function(){
        return gulp.src('styles/sass/screen.scss')
            .pipe(plumber({errorHandler: function(err) {
                notify.onError({
                            title:    "Gulp: [sass]",subtitle: "Error",message:  "<%= error.message %>",sound:    false
                        })(err);
    
                this.emit('end');
            }}))
            .pipe(sourcemaps.init())
            .pipe(sassglob())
            .pipe(sass())
            .pipe(autoprefixer({
                cascade: false
            }))
            .pipe(cleancss({
                compatibility: '*',}))
            .pipe(gulp.dest('styles'))
            .pipe(livereload())
            .pipe(sourcemaps.write())
            done();
    });
    
    gulp.task('watch',function(done){
        livereload.listen();
        gulp.watch(['styles/sass/**/**/*.scss'],{ usePolling: true },gulp.series(['sass']));
        gulp.watch(['../*.php','../templates/**/*.php','../partials/**/*.php'],{ usePolling: true }).on('change',livereload.changed);
    });
    
    gulp.task('default',gulp.series(['sass','watch']));

我的 screen.scss 像这样提取了我所有的 scss。这些深入几个目录并编译为 screen.css。

@charset "UTF-8";

/*
utilities
*/
@import "utility/**/*";

/*
vendor
*/
@import "vendor/**/*";

/*
globals
*/
@import "globals/**/*";

/*
modules
*/
@import "modules/**/**/*";

/*
templates
*/
@import "templates/**/*";

再说一次，我的一般设置多年来一直运行良好，所以我想知道这是否是刚刚搞砸的 gulp 软件包之一的新版本？

最后，我的文件结构：

/assets/
/assets/styles/
/assets/styles/sass/
/assets/styles/sass/globals/ ...
/assets/styles/sass/modules/ ...
/assets/styles/sass/components/ ...
/assets/styles/sass/screen.scss
/assets/styles/screen.css

解决方法

好吧，笨蛋：

我在 CMS 中有一个函数，可以在页面刷新时编写 sass 部分。