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

132

私はgulpを使うのが初めてで、セットアップの例を調べています。一部の人々は以下の構造を持っています：

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

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

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

私はsrc のリターンがどのような違いを生むのかと思っていますか？

javascript node.js gulp

— boldfacedesignuk
ソース

回答:

158

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

これがないと、タスクシステムはいつ終了したかを認識できません。ドキュメントを読む。

— シンドレ・ソルフス
ソース

優れた！返信Sindreに感謝します。チャームのように一気に走りましょう。大好きです。

— boldfacedesignuk 14

まさに私が探していたもの:)

— Sebastien Lorber 14

つまり、使用時に戻る必要があるということですgulp.src()か？戻らないとどうなります gulp.src()か？

— jbandi

私は@jbandiの2番目です-ここで尋ねる明らかな質問は、「返さない理由はありますかgulp.src(...、それとも常にそれを行うべきですか？」です。この回答は、IMOがその点に対処した場合に、より有用になります。現在のところ、呼び出しをgulp.src(...行っても返さないタスクの例が多い理由については触れていません。

— Mark Amery

@jbandi：そうしないreturnと、依存関係システムは、依存関係が完了する前にタスクを開始する可能性があります。多くのタスク（主にコード生成）を含むgulpfileがあります。ストリームを返さなかったため、依存関係がまだ構築されている間、依存タスクは既にファイルを読み取っていました。あらゆるトラブルに巻き込まれた...

— グリゴラン

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

例えば

// 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'));
});

その例では、あなたは期待するでしょう task2が実行される前にtask1が完了する（たとえばコーヒースクリプトなどをコンパイルする）されますが、次の例のようにreturnを追加しない限り、非同期ではなく同期的に実行されます。また、タスク2はタスク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

— 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']);

— jpblancoder
ソース