gulpとは
本家はここ
http://gulpjs.com/
概要についてはここ
gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) - ＠IT
大雑把に言いうと、js,cssファイルを圧縮したり、他の言語をコンパイルしたり、
ブラウザを勝手にリロードしてくれるサーバーを立ち上げたり、普段の作業を自働化するようにできるツール。
gulpfile.jsにいろんなタスクを記述し、ワンコマンドで呼び出しが可能。
普段使うであろう、絶対に押さえておきたいgulp API
ここのセクションについては、
gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの弱点を補うgulp.jsのインストールと使い方 (2/3) - ＠IT
を参考にした
タスクを定義――gulp.task(name[, deps], fn)
タスクを定義する。第2引数には依存するタスクを配列で記述でき、タスク実行前に実行される
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// Do stuff
});
入力対象となるファイル群を指定――gulp.src(globs[, options])
入力対象となるファイル群を指定します。glob引数に指定できる形式は、
「node-glob」のシンタックスである。つまり、ここの、「node-glob」のオブジェクトが返されているということ。
src関数で指定したファイル群をpipe関数でつなぎ、タスクを実行していく。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
gulp.src('src/**/*.html')
.pipe(foo())
});
foo()は、プラグインの関数である。
タスク名を指定して実行――gulp.run(tasks…[, cb])
タスク名を指定することで、対象のタスクを実行できます。
//fooタスク内でbarタスク実行
gulp.task('foo', function(event) {
gulp.run('bar');
});
出力先となるパスを指定――gulp.dest(path)
出力先となるパスを指定します。
pipe関数から流れてきた情報をファイルに出力することができる。
ファイル群を監視――gulp.watch(glob, cb)
指定されたファイル群を監視し、ファイルが更新された場合に第2引数の関数を実行する。
//jsファイルが更新されたらメッセージ表示
gulp.watch('**/*.js', function(event) {
console.log("js file changed!");
});
このままgulpfile.jsに記述すると、いつも監視状態になってしまうので、通常は、
gulp.task('foo', function(event) {
gulp.watch('**/*.js', function(event) {
console.log("js file changed!");
});
});
のように、gulp.task内に記述する。
これで、
gulp foo
で呼び出せる。
習慣的にこちらをつかう。
gulp.srcをもう少し、深く説明
一番重要であろう(もっともよく使う)、gulp.src(globs[, options])について深く説明する。これは、「node-glob」のシンタックスであるから、ファイルの指定方法は、gulpのdocsには、存在しない。
これを知るには、https://github.com/isaacs/node-globに見に行く必要がある。
重要な部分だけ少し翻訳する。
間違っている可能性もあるが、わかった時に修正する。
Glob Primer
"Globs" は、ls *.jsとコマンドを打つときや、.gitignoreにbuild/*と打つときのパターンである。
Globには、ブラケットセクションがある。これは、{から始まり、}で終わる部分である。この部分は、解析される前に展開される。
それは、例えば、a{/b/c,bcd}はa/b/cとabcdに展開される。
そのほかに、パターンを表すのに以下のような表現方法がある。
-
*0個以上の文字にマッチします -
?1つの文字にマッチします -
[...]正規表現の範囲を表します。[の直後に!や^をつけると、否定の意味になります。 -
!(pattern|pattern|pattern)このパターンにはどれもマッチしなくなります。 -
?(pattern|pattern|pattern)中の文字列に０もしくは１回だけマッチします。 -
+(pattern|pattern|pattern)中の文字列に０回以上の繰り返されている部分にマッチします。 -
*(a|b|c)a,b,cのどれかで構成された文字列を表します。 -
@(pattern|pat*|pat?erN)どれかのパターンにマッチします。 -
**globstarと呼ばれ、０以上のディレクトリの階層にマッチします。
全体的な意味はこんな感じである。
端折って書いたり順番を入れ替えたりしている
さらに詳しい情報が知りたい人は、この本家のサイトへ
gulp/API.md at master · gulpjs/gulp
gulpの用法を一通り知りたい人は、このサイトを一読するとよい
タスクランナーgulp.js最速入門 - id:anatooのブログ