在Gulp中，你如何縮小一個css文件，然後將它附加到已經縮小的css文件中？

Question

我有一個大的縮小的CSS文件和一個小的非縮小文件。 我會定期更改非縮小文件，但我希望將它們合併。 但是，重新縮小大型縮小文件需要太長的時間。

我想是這樣的......

var cssnano = require('gulp-cssnano'); 
var cssjoin = require('gulp-cssjoin'); 

gulp.task('cssjoin', function() { 
    gulp.src('changing.css') 
    .pipe(cssnano()) 
    .pipe(rename('changed.min.css')) 
    .pipe(gulp.dest('.')); 

    gulp.src(['big.min.css','changed.min.css']) 
     .pipe(cssjoin()) 
     .pipe(gulp.dest('final.min.css')) 
}); 

基本上，首先運行如下的小文件，然後把它加入一個大的結束。上面的代碼當然不起作用，任務需要return等功能。

我也想在連接完成後刪除'changed.min.css'。

我嘗試了3個小時的各種組合，沒有找到工作解決方案。如何解決這個問題呢？

Answer 1

您可以使用gulp-add-src將big.min.css附加到流中。這樣你只能在changed.css上運行cssnano()，而不是兩個文件。

之後，您使用gulp-concat兩個文件合併成一個新的final.min.css：

var gulp = require('gulp'); 
var cssnano = require('gulp-cssnano'); 
var concat = require('gulp-concat'); 
var addsrc = require('gulp-add-src'); 

gulp.task('cssjoin', function() { 
    return gulp.src('changing.css') 
    .pipe(cssnano()) 
    .pipe(addsrc.append('big.min.css')) 
    .pipe(concat('final.min.css')) 
    .pipe(gulp.dest('.')); 
}); 

有沒有必要，因爲沒有被寫入磁盤刪除中介changed.min.css與此有關。所有的操作都發生在內存中。