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()); 
    }); 

这种方法使得任务更加紧密，但是当有疑问去与不同的任务。