Gulp change src

Question

我有這個任務。首先我用一個src做一件事。然後我用另一個src做另一件事。我如何「合併」他們只是一個管道？

gulp.task('css', function() { 
    gulp.src('site/patterns/site/site.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer()) 
     .pipe(rename('index.css')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(minifyCss()) 
     .pipe(rev()) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(rev.manifest()) 
     .pipe(revDel({ dest: 'assets/css' })) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(notify("CSS generated!")) 
    ; 
    gulp.src(['assets/css/index-*.css'], {read: false}) 
     .pipe(revOutdated()) // leave 2 recent assets (default value) 
     .pipe(cleaner()); 
}); 

Answer 1

你不合並他們，你不把他們變成一個單一的管道。你在這裏有兩個相關的任務。你應該這樣對待他們。

您希望您的第二條管道只在第一條管道完成後才能運行，以便所有.css文件已生成爲assests/css。所以你把每一個管道到一個單獨的任務，使第二取決於第一：

gulp.task('generate-css', function() { 
    return gulp.src('site/patterns/site/site.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer()) 
    .pipe(rename('index.css')) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(minifyCss()) 
    .pipe(rev()) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(rev.manifest()) 
    .pipe(revDel({ dest: 'assets/css' })) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(notify("CSS generated!")); 
}); 

gulp.task('css', ['generate-css'], function() { 
    return gulp.src(['assets/css/index-*.css'], {read: false}) 
    .pipe(revOutdated()) // leave 2 recent assets (default value) 
    .pipe(cleaner()); 
}); 

Answer 2

這是真的，不同的任務不應該被合併或變成一個單一的管道，但每一個小微子任務提升到一個單獨的任務只是爲了確保它按照正確的順序執行可以快速膨脹你的gulpfile.js。對於複雜的構建環境，很容易產生如此多的任務和依賴關係，以至於沒有人能夠弄清楚發生了什麼。

要在任務結束串行執行的子任務，使用gulp-ignore以清除src乙烯流之後gulp-add-src有效地創建一個新的流。

的package.json

"devDependencies": { 
    "gulp-add-src": "~0.2", 
    "gulp-ignore": "~2.0", 

gulpfile.js

var addsrc = require('gulp-add-src'); 
var ignore = require('gulp-ignore'); 
... 
gulp.task('generate-css', function() { 
    return gulp.src('site/patterns/site/site.scss') 
     .pipe(sass().on('error', sass.logError)) 
     ... 
     .pipe(ignore.exclude(true)) //clear out src vinyl stream 
     .pipe(addsrc.prepend('assets/css/index-*.css')) //new stream 
     .pipe(revOutdated()) 
     .pipe(cleaner()); 
    }); 

這種方法使得任務更加緊密，但是當有疑問去與不同的任務。