Gulp观察在页面重新加载时liverload重新加载,或者自己加载



我有一个最近突然出现的令人恼火的问题,我无法弄清楚:当我的gulp watch任务正在运行时,如果我手动刷新页面,sass任务将触发liverload正在观看(它会声称screen.css已被触摸),然后将继续触发,而不需要我在后台对已观看的文件进行任何更改,好像它正在积累"watches"直到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 globing有问题。

我尝试过的事情:

  • 将所有与sass相关的或肝脏负载的gulp包还原为与另一个不这样做的本地站点的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']));

我的屏幕上。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部分。

最新更新