web-dev-qa-db-ja.com

Gulp.jsタスク、srcに戻りますか?

私はgulpが初めてで、セットアップ例を見てきました。一部の人々は次の構造を持っています:

gulp.task("XXXX", function() {
    gulp.src("....

他の人はこれを持っています:

gulp.task("XXXX", function() {
   return gulp.src("....

Srcのreturnがどのような違いをもたらすのだろうか?

129

returnは、タスクが非同期であることを示します。 gulp.src()はストリームを返すため、非同期です。

それがなければ、タスクシステムはいつ終了したかを知りません。 docs を読んでください。

156
Sindre Sorhus

依存タスクがある場合は、タスクのストリームをreturnして、依存タスクが完了するのを待ってから実行する必要があります。

eg

// without return
gulp.task('task1', function() {
    gulp.src('src/coffee/*.coffee')
      /* eg compile coffeescript here */
     .pipe(gulp.dest('src'));
});

gulp.task('task2', ['task1'], function() {
    gulp.src('src/*.js')
      /* eg minfify js here */
     .pipe(gulp.dest('dest'));
});

その例では、task1が完了する前(例:coffeescriptのコンパイルなど)にtask2は実行されますが、returnを追加しない限り(以下の例のように)、非同期ではなく同期的に実行されます。 task2はタスク1が完了するのを待たず、コンパイルされた出力task1。そのため、これらの状況では常に戻る必要があります。

// with return
gulp.task('task1', function() {
    return gulp.src('**/*.coffee')
      /* your operations here */
     .pipe(gulp.dest('dest'));
});

gulp.task('task2', ['task1'], function() {
    return gulp.src('**/*.js')
      /* your operations here */
     .pipe(gulp.dest('dest'));
});

編集:ここのレシピではさらに説明しています。 https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

36
byronyasgur

タスクごとに複数のストリームがある場合、これが役立つことがわかりました。複数のストリームを結合/マージして返す必要があります。

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

gulp.task('test', function() {
    var bootstrap = gulp.src('bootstrap/js/*.js')
        .pipe(gulp.dest('public/bootstrap'));

    var jquery = gulp.src('jquery.cookie/jquery.cookie.js')
        .pipe(gulp.dest('public/jquery'));

    return merge(bootstrap, jquery);
});

代わりに、Gulpsタスク定義構造を使用すると、次のようになります。

var gulp = require('gulp');

gulp.task('bootstrap', function() {
    return gulp.src('bootstrap/js/*.js')
        .pipe(gulp.dest('public/bootstrap'));
});

gulp.task('jquery', function() {
    return gulp.src('jquery.cookie/jquery.cookie.js')
        .pipe(gulp.dest('public/jquery'));
});

gulp.task('test', ['bootstrap', 'jquery']);
26
jpblancoder