ここ半年くらいgulpを中心に開発して色々試行錯誤した挙句、gulpのタスクを一気に登録できるようなパッケージとしてgulp-task-runnerというのをつくってみました。READMEがまだまだ不完全なのでざっくりした使い方をここに書きます。

gulp-task-runnerでできること

インストールしてgulpを起動後、ファイルの編集と保存をするだけで あたりを自動でやってくれます。

インストール

npm install --save-dev gulp-task-runner
でインストールしてください。最新バージョンは0.1.7です。

必要なディレクトリ構成とgulpfile.babel.jsの設定

examplesディレクトリにサンプルがあります。まずsrcディレクトリの中をみてください。 homepage-pcとhomepage-spという二つのディレクトリがあって、それぞれにcss/html/scssディレクトリとgulpfile.babel.jsファイルがあります。homepage-spディレクトリ内のgulpfile.babel.jsは以下のとおりです： そしてこのgulpfile.babel.jsでビルドした後のディレクトリは以下のとおりになります： まずlocalhostはローカルホストの名前、buildPathはgulpfile.babel.jsファイルからの相対パスで指定します。buildPathにコンパイルして出来上がったファイル一式が吐き出されます。sitemapにはurlのところにサイトのURLを記述します。これがsitemap.xmlに反映されます。sitemap.xmlの生成はgulp sitemapでもできます。 次いでcontents : ...ですが、ここではbuildディレクトリには吐き出すファイルをすべて指定しています。build後のディレクトリとconfig.contentsを見比べると１対１に対応しているのが分かると思います。top.htmlだけが特別で、これはbuild/index.htmlになっています。その他、例えばcontents内のaboutはbuild/about/index.htmlとして吐き出されます。plan, reportのようにサブディレクトリを作成する場合は上の例のようにconfig.contents内にオブジェクトリテラルで指定してください。オブジェクトリテラルのキーがサブディレクトリの名前、配列はその階層でのディレクトリ群になります。 srcディレクトリには対応するファイルをhtmlディレクトリ、scssディレクトリに格納してください。ファイル名にはseparatorプロパティで指定した文字列（デフォルトだと’___’）でサブディレクトリを区切ってください。例えばreport\_\_\_01\_\_\_details.htmlというファイルであればbuild/report/01/details/ディレクトリにindex.htmlとして吐き出されます。最終的にはすべてのファイルはindex.htmlという名前にリネームされることに注意してください。また、src/scssディレクトリ内のファイルはデフォルトではsrc/cssに吐き出されます。これをhtmlディレクトリ内のファイルから@@includeしてください。cssはコンパイル段階でhtmlファイルにベタ張りして、link要素でのcss読み込みはしないことを前提としています。 jsファイルはすべてbuildPathで指定したディレクトリ直下のjsディレクトリに吐き出されます。

サブディレクトリについてもう少し

examples/src/homepage-pcの方では となっていて、homepage-spの方では と少し違う書き方をしていますが、出来上がりのディレクトリ構造はどちらも同じになります。サブディレクトリを指定するオブジェクトリテラルは下のように分けて書いてもいいですし、上のようにひとまとめにしても大丈夫です。自分が把握しやすい方で書いてください。

依存ファイルの監視

依存ファイルの監視はwatchesプロパティに登録します。上記のサンプルだと以下の部分がそれです： srcsには配列で監視したいファイル群、tasksには監視したいファイルが変更されたときに更新したいファイル群を指定します。gulp-task-runnerではソースファイル名がそのままタスク名になるため、srcsの変更とともに更新したいファイルの名前をtasksに列挙してください。

gulp起動

後はターミナルから gulp でgulpを起動してください。例えばexamples/src/homepage-spでgulpを起動すると みたいなメッセージが出て一気にコンパイルが始まります。これで各ファイルを編集・保存すると自動的にファイルがアップデートされてブラウザに反映されます。

画像の圧縮

examplesには入っていませんが、srcディレクトリにimagesディレクトリをつくって画像ファイルを突っ込んでおくと、gulp imagesで画像の圧縮とbuildディレクトリへの吐き出しをしてくれるようになってます。この辺、デフォルトの挙動とオプションの追加なんかはおいおいやっていきます。

終わりに

今年は春くらいにgulpを使い始めてずっとお世話になってました。このあたりの技術は移り変わりがものすごく早いので、来年もgulpを使い続けているかどうかわかりませんが、少なくとも業務でホームページやランディングページを作る分にはしばらくこれで十分かなという感じになってます。