我最近遇到了一个令人恼火的问题,我想不通:当我的gulp watch任务正在运行时,如果我手动刷新Liverload正在监视的页面,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都拉进来。这些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
1条答案
按热度按时间oalqel3c1#
好吧,笨蛋:
我在CMS中有一个函数,它在页面刷新时写入一个sass partial。