使用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);
});