使用Gulp缩小CSS

Question

我只需要缩小版本的“ app.scss”，现在我将所有三个SCSS文件都转换为“ .min”文件。 请帮忙

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename')

gulp.task('sass', function(){
    return gulp.src(['scss/style.scss', 'scss/variable.scss', 'scss/app.scss'])
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(sass({outputStyle:'compressed'}))
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('css'))
});

Answer 1

您当前正在使用相同的compressed设置将所有三个文件通过管道传输到同一sass管道。 有多种解决方案，包括：

• 使用gulp-if选择性地对sass进行非压缩调用
• 创建不同的流并使用merge-stream作为任务的合并结果返回它们

Answer 2

发生的事情是您在单个源Blob上运行所有命令。 这将导致所有操作都在同一组文件上执行。 您需要的是将一个命令输出到另一个命令。 通过为每个操作编写一个单独的task ，这也是正确的方法。

使用序列插件一个接一个地执行任务，并使用另一个gulp.src获取组合文件。 像这样：

gulp.task('sass', function(){
    // Compile Sass
    return gulp.src(['scss/style.scss', 'scss/variable.scss', 'scss/app.scss'])
    ... bla bla ...

});

gulp.task('minify', function(){
    // Minify
    return gulp.src(['app.scss'])
    ... bla bla ...
});

gulp.task('all', function(cb){
    gulpSequence(['sass', 'minify'], cb);
});