npmパッケージ”gulp-task-runner”をリリースしました
ここ半年くらいgulpを中心に開発して色々試行錯誤した挙句、gulpのタスクを一気に登録できるようなパッケージとしてgulp-task-runnerというのをつくってみました。READMEがまだまだ不完全なのでざっくりした使い方をここに書きます。
gulp-task-runnerでできること
インストールしてgulpを起動後、ファイルの編集と保存をするだけで
- gulp-minify-htmlでのhtmlファイルの圧縮
- gulp-file-includeでのhtmlファイルでの共通部分のインクルード（header, footer等々）
- gulp-task-runnerに渡すオブジェクトのcontentsプロパティに対応したディレクトリ構造でのファイルの吐き出し
- gulp-sassでのSCSSのコンパイル
- gulp-minify-cssでのCSSファイルの圧縮
- gulp-autoprefixerでのCSSプレフィックスの自動付与
- browserify+babelifyでのJSファイルのコンパイル
- gulp-sourcemapsでのsourcemapの作成
- gulp-uglifyでのJSファイルの圧縮
- gulp-imageminとimagemin-pngquantでの画像ファイル圧縮
- browser-syncによるブラウザの起動と同期
- gulp-sitemapによるsitemap.xmlの生成
あたりを自動でやってくれます。
インストール
npm install --save-dev gulp-task-runner
でインストールしてください。最新バージョンは0.1.7です。
必要なディレクトリ構成とgulpfile.babel.jsの設定
examplesディレクトリにサンプルがあります。まずsrcディレクトリの中をみてください。
src/
├── homepage-pc
│ ├── css
│ │ └── top.css
│ ├── gulpfile.babel.js
│ ├── html
│ │ ├── _footer.html
│ │ ├── _header.html
│ │ ├── about.html
│ │ ├── plan.html
│ │ ├── plan___01.html
│ │ ├── plan___02.html
│ │ ├── report.html
│ │ ├── report___01.html
│ │ ├── report___01___details.html
│ │ ├── report___02.html
│ │ └── top.html
│ ├── js
│ └── scss
│ └── top.scss
└── homepage-sp
├── css
│ └── top.css
├── gulpfile.babel.js
├── html
│ ├── _footer.html
│ ├── _header.html
│ ├── about.html
│ ├── plan.html
│ ├── plan___01.html
│ ├── plan___02.html
│ ├── report.html
│ ├── report___01.html
│ ├── report___01___details.html
│ ├── report___02.html
│ └── top.html
├── js
└── scss
└── top.scsshomepage-pcとhomepage-spという二つのディレクトリがあって、それぞれにcss/html/scssディレクトリとgulpfile.babel.jsファイルがあります。homepage-spディレクトリ内のgulpfile.babel.jsは以下のとおりです：
/** * * @file * gulpfile.babel.js * */ 'use strict'; var config = { localhost : 'localhost/build/sp/', buildPath : '../../build/sp', sitemap : { url : 'https://example.com/sp/' }, separator : '___', contents : [ 'top', 'about', 'report', { 'report' : [ '01', '02', { '01' : [ 'details' ] } ] }, 'plan', { 'plan' : [ '01', '02' ] }, ], watches : [ { srcs : [ 'html/_header.html', 'html/_footer.html', ], tasks : [ 'top.html', 'about.html', 'plan01.html', 'plan02.html' ] }, ] }; import { GulpTaskRunner } from 'gulp-task-runner'; var gulpTaskRunner = new GulpTaskRunner( config );
そしてこのgulpfile.babel.jsでビルドした後のディレクトリは以下のとおりになります：
└── sp
├── about
│ └── index.html
├── index.html
├── plan
│ ├── 01
│ │ └── index.html
│ ├── 02
│ │ └── index.html
│ └── index.html
├── report
│ ├── 01
│ │ ├── details
│ │ │ └── index.html
│ │ └── index.html
│ ├── 02
│ │ └── index.html
│ └── index.html
└── sitemap.xmlまず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の方では
contents : [ 'top', 'about', 'report', 'plan', { 'report' : [ '01', '02', { '01' : [ 'details' ] } ], 'plan' : [ '01', '02' ] }, ]
となっていて、homepage-spの方では
contents : [ 'top', 'about', 'report', { 'report' : [ '01', '02', { '01' : [ 'details' ] } ] }, 'plan', { 'plan' : [ '01', '02' ] }, ]
と少し違う書き方をしていますが、出来上がりのディレクトリ構造はどちらも同じになります。サブディレクトリを指定するオブジェクトリテラルは下のように分けて書いてもいいですし、上のようにひとまとめにしても大丈夫です。自分が把握しやすい方で書いてください。
依存ファイルの監視
依存ファイルの監視はwatchesプロパティに登録します。上記のサンプルだと以下の部分がそれです：
watches : [ { srcs : [ 'html/_header.html', 'html/_footer.html', ], tasks : [ 'top.html', 'about.html', 'plan01.html', 'plan02.html' ] }, ]
srcsには配列で監視したいファイル群、tasksには監視したいファイルが変更されたときに更新したいファイル群を指定します。gulp-task-runnerではソースファイル名がそのままタスク名になるため、srcsの変更とともに更新したいファイルの名前をtasksに列挙してください。
gulp起動
後は
$ gulpでgulpを起動してください。例えばexamples/src/homepage-spでgulpを起動すると
[16:22:13] Requiring external module babel-core/register -------------------------------------------------- Structure of build directory -------------------------------------------------- src file: top.html, destination: ../../build/sp/index.html src file: about.html, destination: ../../build/sp/about/index.html src file: report.html, destination: ../../build/sp/report/index.html src file: report___01.html, destination: ../../build/sp/report/01/index.html src file: report___02.html, destination: ../../build/sp/report/02/index.html src file: report___01___details.html, destination: ../../build/sp/report/01/details/index.html src file: plan.html, destination: ../../build/sp/plan/index.html src file: plan___01.html, destination: ../../build/sp/plan/01/index.html src file: plan___02.html, destination: ../../build/sp/plan/02/index.html -------------------------------------------------- [16:22:16] Using gulpfile ~/Google Drive/work/node-packages/gulp-task-runner/examples/src/homepage-sp/gulpfile.babel.js [16:22:16] Starting 'browser-sync'... [16:22:16] Finished 'browser-sync' after 15 ms [16:22:16] Starting 'default'... [16:22:16] Starting 'all'... [16:22:16] Starting 'top.scss'... [16:22:16] Starting 'about.scss'... [16:22:16] Starting 'report.scss'... [16:22:16] Starting 'report___01.scss'... [16:22:16] Starting 'report___02.scss'... [16:22:16] Starting 'report___01___details.scss'... [16:22:16] Starting 'plan.scss'... [16:22:16] Starting 'plan___01.scss'... [16:22:16] Starting 'plan___02.scss'... [16:22:16] Starting 'sitemap'... [16:22:16] Finished 'all' after 32 ms [16:22:16] Finished 'default' after 49 ms [16:22:16] Finished 'about.scss' after 46 ms [16:22:16] Starting 'about.html'... [16:22:16] Finished 'report.scss' after 47 ms [16:22:16] Starting 'report.html'... [16:22:16] Finished 'report___01.scss' after 48 ms [16:22:16] Starting 'report___01.html'... [16:22:16] Finished 'report___02.scss' after 50 ms [16:22:16] Starting 'report___02.html'... [16:22:16] Finished 'report___01___details.scss' after 49 ms [16:22:16] Starting 'report___01___details.html'... [16:22:16] Finished 'plan.scss' after 49 ms [16:22:16] Starting 'plan.html'... [16:22:16] Finished 'plan___01.scss' after 50 ms [16:22:16] Starting 'plan___01.html'... [16:22:16] Finished 'plan___02.scss' after 50 ms [16:22:16] Starting 'plan___02.html'... [BS] Proxying: http://localhost [BS] Access URLs: ----------------------------------------------- Local: http://localhost:3000/build/sp/ External: http://192.168.11.6:3000/build/sp/ ----------------------------------------------- UI: http://localhost:3001 UI External: http://192.168.11.6:3001 ----------------------------------------------- [BS] 1 file changed (index.html) [16:22:16] Finished 'about.html' after 288 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'report.html' after 284 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'report___01.html' after 282 ms [BS] 1 file changed (top.css) [16:22:16] Finished 'top.scss' after 352 ms [16:22:16] Starting 'top.html'... [BS] 1 file changed (index.html) [16:22:16] Finished 'report___02.html' after 292 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'report___01___details.html' after 291 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'plan.html' after 291 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'plan___01.html' after 295 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'plan___02.html' after 294 ms [BS] 1 file changed (index.html) [16:22:16] Finished 'top.html' after 29 ms [16:22:16] Finished 'sitemap' after 356 ms
みたいなメッセージが出て一気にコンパイルが始まります。これで各ファイルを編集・保存すると自動的にファイルがアップデートされてブラウザに反映されます。
画像の圧縮
examplesには入っていませんが、srcディレクトリにimagesディレクトリをつくって画像ファイルを突っ込んでおくと、gulp imagesで画像の圧縮とbuildディレクトリへの吐き出しをしてくれるようになってます。この辺、デフォルトの挙動とオプションの追加なんかはおいおいやっていきます。
終わりに
今年は春くらいにgulpを使い始めてずっとお世話になってました。このあたりの技術は移り変わりがものすごく早いので、来年もgulpを使い続けているかどうかわかりませんが、少なくとも業務でホームページやランディングページを作る分にはしばらくこれで十分かなという感じになってます。