我有个任务:
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
当我添加新的空"。Scss "文件到'/admin_app/Scss/',并从上面运行任务,空"。"Scss"文件被复制到目标文件夹。如果文件不是空的一切都是好的:一个有效的css文件(扩展名为".css")被编译,没有"。复制Scss"文件。问题是当我添加new "时。Scss " file到"/admin_app/Scss/"目录,触发"watch"任务,由于file为空,因此将其复制到目标目录。结果,许多不需要的垃圾是dest文件夹。为什么会发生这种情况,我怎样才能摆脱它?
我的"watch"one_answers"default"任务:
gulp.task('watch', ['compile_scss'], function() {
apps.forEach(function(appName) {
gulp.watch('/admin_app/scss/*.scss', ['compile_scss']);
});
});
gulp.task('default', ['watch']);
解决这个问题的一种方法是简单地过滤空文件。
试试这样写:
var filter = require('gulp-filter'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(filter(function(a){ return a.stat && a.stat.size }))
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
还有一个专门用于此目的的插件。你可以这样使用:
var clip = require('gulp-clip-empty-files'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(clip())
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
另外:在编译空文件时,gulp-sass
和底层库中似乎有几个问题的报告。gulp-sass
有一个Github问题,报告这个问题应该在2中解决。X版本的插件。如果你已经在跑步了。X,您面临的问题可能是解决原始问题时引入的问题。
如果您在sass文件夹中添加空scss
文件,请使用下划线前缀:_empty.scss
.
参见此处的"偏导数":http://sass-lang.com/guide#topic-4
您可以创建包含CSS小片段的部分Sass文件可以包含在其他Sass文件中。这是一个很好的方法模块化你的CSS,让它更容易维护。部分只是一个以下划线开头的Sass文件。你可能会说它类似于_partial。scss。下划线让Sass知道这一点该文件只是部分文件,不应该生成它到一个CSS文件。Sass部分与@import指令一起使用。