Gulp-minify-css不會產生輸出文件

Question

我已經設置了一個非常簡單的gulpfile.js只有兩個任務 - 'sass'和'minify-js'。當檢測到變化時，這兩個任務由任務「監視」觸發。它似乎一切正常：Gulp正在監聽更改，* .scss文件被編譯爲CSS，控制檯按預期生成輸出，沒有任何錯誤。但是，CSS文件不會被縮小，不會有任何輸出文件來自'minify-css'任務。

爲什麼'minify-css'不工作？我在這裏錯過了什麼？

這是我gulpfile.js：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var watch = require('gulp-watch'); 
var minifyCSS = require('gulp-minify-css'); 

gulp.task('sass', function() { 
    gulp.src('plugins/SoSensational/styles/sass/*.scss') 
      .pipe(sass()) 
      .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
}); 

gulp.task('minify-css', function() { 
    gulp.src('plugins/SoSensational/styles/dest/*.css') 
      .pipe(minifyCSS()) 
      .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
}); 

gulp.task('watch', function() { 
    gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']); 
}); 

Answer 1

聽起來像一個競爭條件。 Sass和MinifyCSS並行執行，可能是因爲您已經運行MinifyCSS時沒有完成Sass任務。薩斯應該是一個依賴，所以你有兩個選擇：

1. 讓薩斯從minifycss依賴：

   gulp.task('minify-css', ['sass'], function() { 
       return gulp.src('plugins/SoSensational/styles/dest/*.css') 
        .pipe(minifyCSS()) 
        .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
   }); 
   
   gulp.task('watch', function() { 
       gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']); 
   }); 
   

2. 有一個任務，做兩個！

   gulp.task('sass', function() { 
       return gulp.src('plugins/SoSensational/styles/sass/*.scss') 
        .pipe(sass()) 
        .pipe(minifyCSS()) 
        .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
   }); 
   

後者實際上一個是優選的版本。您節省大量的時間，如果你沒有一箇中間結果

順便說一句：不要忘了return語句

Answer 2

我知道這是種一個老問題，但以爲我會扔了這一點因爲這對我有幫助。要建立從ddprrt答案，我建議改變：

gulp.task('sass', function() { 
    return gulp.src('plugins/SoSensational/styles/sass/*.scss') 
     .pipe(sass()) 
     .pipe(minifyCSS()) 
     .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
}); 

到：

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

gulp.task('sass', function() { 
    return gulp.src('plugins/SoSensational/styles/sass/*.scss') 
     .pipe(sass('site.css')) 
     .pipe(gulp.dest('plugins/SoSensational/styles/dest/')) 
     .pipe(minifyCSS()) 
     .pipe(rename('site.min.css')) 
     .pipe(gulp.dest('plugins/SoSensational/styles/dest/')); 
}); 

這允許您與未精縮CSS調試和部署縮小的版本。

Answer 3

這是因爲gulp-minify-css已被棄用。改用gulp-clean-css。

請點擊這裏（https://www.npmjs.com/package/gulp-minify-css「npm-clean-css」）！