ガルフチェンジsrc

Question

私はこの仕事をしています。まず、1つのsrcで1つのことを行います。それから別のsrcを使って別のことをします。それらを「合併」して1つのパイプラインにするにはどうすればよいですか？

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

これらをマージせず、1つのパイプラインにすることはできません。あなたがここにいるのは、2つの依存するタスクです。あなたはそのように扱うべきです。

assests/cssにすべての.cssファイルが生成されるように、2番目のパイプラインを最初のパイプラインが終了した後でのみ実行するようにします。だから、別のタスクに各パイプラインを入れて、二を作る最初に依存：

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-add-src続いsrcビニルストリームをクリアするgulp-ignoreを使用し、タスクの終了時に連続サブタスクを実行します。

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

このアプローチでは、タスクは、より粘着性になりますが、疑わしい場合には別々のタスクで行きます。