Gulp sass将空的scss文件复制到目标文件夹

Gulp sass copies empty scss files to destination folder

本文关键字：复制 目标 文件夹 文件 scss sass Gulp      更新时间：2023-09-26

我有个任务:

   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"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指令一起使用。

相关文章：