当页面重新加载时，Gulp watch with Livereload 重新加载，或者自己答案

【问题标题】：Gulp watch with Livereload reloading when the page is reloaded, or by itself当页面重新加载时，Gulp watch with Livereload 重新加载，或者自己
【发布时间】：2021-10-03 14:31:09
【问题描述】：

我最近出现了一个我无法弄清楚的令人恼火的问题：当我的 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 包以匹配另一个不这样做的本地站点
确保 screen.css 没有被 CMS 修改（它最初确实有 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

【问题讨论】：

标签： sass gulp livereload

【解决方案1】：

好吧，笨蛋：

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

【讨论】：