web-dev-qa-db-ja.com

Gulpタスクをデフォルトに設定します

私のチームの他の誰かが作成したgulpFileに次のタスクがあります。

gulp.task('serve', [], function(){
   gulp.run(
    'fonts',
    'browsersync',
    'watch'
  );
});

そのままにしておきたいのですが、デフォルトのタスクをこのタスクにマップしたかったのです。だから私は試しました：

gulp.task('default',['serve']);

サーバーが実行されるという点で機能しているように見えますが、何らかの理由で「監視」タスクが実行されていないため、変更時にブラウザーが更新されません。

「gulp serve」ではなく「gulp」を実行すると、すべて正常に機能します。どうしたの？

編集：監視タスクは次のとおりです。

gulp.task('watch', ['styles', 'browsersync'], function() { //'default'
  gulp.watch(
    [
      './app/assets/sass/**/*.scss',
      './app/modules/**/*.scss'
    ], ['styles']);

  gulp.watch([
    './app/**/*.js',
    './app/**/*.html'
  ], function() {
    reload();
  });

});
node.jsgulpgulp-watch
14
Steve

serve内で実行するのではなく、配列引数に監視タスクを含めるようにデフォルトタスクを更新してみてください。そのようです：

gulp.task('default', ['serve', 'watch']);

非同期タスクサポート に関するGulpのドキュメント、特に最後の例をチェックアウトすると、指定されたタスクが開始される前に依存タスクを終了する必要があることがわかります。

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);
14
Seth

gulp.runおよびgulp.startは悪い習慣と見なされます：

https://github.com/gulpjs/gulp/issues/426
https://github.com/gulpjs/gulp/issues/505

残念ながら、ここでの答えは、同僚が本当にGulpを理解していない可能性があるようです。コードを変更しないと、この問題を解決できない場合があります。

Gulpfile全体のように、より多くのコンテキストがなければ、正確な問題を再現することはできません。しかし、私の考えでは、Gulpがタスクを非同期的/継続的に実行する方法と関係があるということです。 「デフォルト」タスクが途中で終了する場合があります。gulp.runは同期的に実行されません。いずれにせよ、Gulpは、どのタスクをいつ、何を待つ必要があるかについて混乱しています。 2つのまったく異なるツールを使用して、実行シーケンスを管理しています。

の代わりに gulp.run、「serve」タスクは実際に依存関係を使用して他のタスクを実行する必要があります。

gulp.task('serve', ['fonts', 'browsersync', 'watch']);
gulp.task('default', ['serve']);

また、監視タスクがすでに依存関係として「browsersync」をリストしていることを指摘する価値があります。技術的に間違っているわけではありませんが（Gulpは2回目は無視します）、過剰な混乱と混乱を招く可能性があるため、おそらく良い考えではありません。 「watch」が「browsersync」に依存している場合は、「serve」から「browsersync」依存関係を削除するだけです。

gulp.task('watch', ['styles', 'browsersync'], function () {
  gulp.watch([
    './app/assets/sass/**/*.scss',
    './app/modules/**/*.scss'
  ], ['styles']);

  gulp.watch([
    './app/**/*.js',
    './app/**/*.html'
  ], function() {
    reload();
  });
});
gulp.task('serve', ['fonts', 'watch']);
gulp.task('default', ['serve']);

これにより、探している結果が得られます。

そうは言っても、もしあなたが本当に悪い慣習に従うことを主張するなら、あなたはgulp.run「デフォルト」タスクで：

gulp.task('default', function() {
  gulp.run('serve');
});

あなたの主な問題は、配列タスクの依存関係とgulp.run、しかしいずれにせよ、gulp.runは「間違っている」。

8
Jon Hieb