[解決済み] Gulps gulp.watchが新規ファイルや削除されたファイルに対してトリガーされない?
質問
以下のGulpjsタスクは、glob matchでファイルを編集しても問題なく動作します。
// watch task.
gulp.task('watch', ['build'], function () {
gulp.watch(src + '/js/**/*.js', ['scripts']);
gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
gulp.watch(src + '/less/*.less', ['styles']);
gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});
// build task.
gulp.task('build', ['clean'], function() {
return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});
しかし、新しいファイルや削除されたファイルでは動作しない(トリガーされない)。何か見落としがあるのでしょうか?
EDIT : grunt-watchプラグインを使ってもダメなようです。
gulp.task('scripts', function() {
return streamqueue(
{ objectMode: true },
gulp.src([
vendor + '/jquery/dist/jquery.min.js',
vendor + '/bootstrap/dist/js/bootstrap.min.js'
]),
gulp.src([
src + '/js/**/*.js'
]).pipe(plugins.uglify())
)
.pipe(plugins.concat(pkg.name + '.min.js'))
.pipe(gulp.dest(dest + '/js/'));
});
gulp.task('watch', ['build'], function () {
plugins.watch({glob: src + '/js/**/*.js'}, function () {
gulp.start('scripts');
});
});
EDIT
: 解決済み、でした。
この問題
. で始まるグローブ
./
(の値でした)。
src
)はATMでは動作しないようです。
解決方法は?
編集する。
どうやら
gulp.watch
は、新しいファイルや削除されたファイルでも動作するようになりました。 質問されたときは、そうではありませんでした。
残りの回答はまだ有効です。
gulp-watch
は、変更されたファイルに対してのみ特定のアクションを実行できるため、通常はより良いソリューションです。
gulp.watch
は完全なタスクを実行するだけです。 適度な大きさのプロジェクトでは、これはすぐに遅すぎて役に立たなくなるでしょう。
何も見逃しているわけではありません。
gulp.watch
は、新しいファイルや削除されたファイルでは動作しません。 これは、シンプルなプロジェクトのために設計されたシンプルなソリューションです。
新しいファイルを探すことができるファイルウォッチを取得するには
その
gulp-watch
プラグイン
の方がはるかに強力です。 使い方はこんな感じです。
var watch = require('gulp-watch');
// in a task
watch({glob: <<glob or array of globs>> })
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
gulp.start( <<task name>> );
});
個人的には、最初のオプションをお勧めします。 これにより、ファイルごとの処理をより高速に行うことができます。 ファイルを連結していない限り、livereloadを使った開発ではとても有効です。
ストリームをラップするには
マイ
lazypipe
ライブラリ
とか、単に関数を使って
stream-combiner
このように
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch({glob: 'src/scripts/**/*.js' })
.pipe(scriptsPipeline());
アップデイト 2014年10月15日(木
下記の @pkyeck さんのご指摘の通り、どうやら 1.0 リリースでは
gulp-watch
は、フォーマットを若干変更したため、上記の例は、現在、そうなっているはずです。
var watch = require('gulp-watch');
// in a task
watch(<<glob or array of globs>>)
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
gulp.start( <<task name>> );
});
そして
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch('src/scripts/**/*.js')
.pipe(scriptsPipeline());
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法