gulp.jsをいい感じに起動してくれるラッパーコマンド作った

フロントエンド開発で利用するタスクランナーをGruntからgulp.jsに切り替えて半年以上たった。

gulp.jsはストリームベースの書き方ができるので、何を行うにも一度ファイルに吐き出さないといけないGruntよりも高速に動作する。これは特に複数のプラグインを組み合わせて使う場合に顕著だ。また、タスクの書き方もGruntに比べると簡潔に記述できるので、gulp.jsに乗り換えてからもはやGruntを使う気は無くなってしまった。

フロントエンド開発のプロジェクトでは、vimでファイルを保存した瞬間にgulp.jsを使ってアセットのビルドを開始させて自動的にブラウザをリロードする、というような環境を作ることが多い。これはGruntでもできるがストリームで高速に動作するgulp.jsでやると更に便利だ。

ただ面倒なところがひとつあって、gulpfile.jsを編集した時は、起動しているgulpを手で停止して再起動しないといけない。これが地味にめんどくさかったりするので、これを解決するためにgulperというgulpの簡単なラッパーを作った。

gulperは、gulpを呼び出してくれるコマンドだが、gulpfile.jsやgulpfile.jsがrequireしているファイルが更新されるとgulpを自動的に再起動してくれる。

この記事ではこのgulperについて紹介する。

インストール

普通にnpmでインストールできる。

$ npm install -g gulper

インストールはこれで終わり。gulperは内部でgulpを起動するので、もしgulpをまだインストールしていない場合はこれもnpmからインストールしておく。

使い方

単純にgulpコマンドの代わりにgulperを使えばそれで良い。例えば、gulp serveというコマンドを使いたい場合には単にgulper serveという風にgulpをgulperに置き換えたコマンドを実行すると良い。

$ gulper serve # gulpをgulperに置き換えて実行するだけ

gulperは内部では別のプロセスを建ててgulpを呼び出しているので、gulperに渡したコマンドラインオプションは全てgulpにそのまま渡される。

gulperで起動した後、gulpfile.jsやgulpfile.js内でrequireしたモジュールが更新されると、gulperはそれを検知してgulpを再起動してくれる。コードを見ればわかるが、内部の実装にはnode-devをほとんどそのまま使っている。

終わりに

gulpfile.jsを編集した時に、gulpを再起動するのは地味にめんどくさかったりする。しかもどんなプロジェクトでもこのめんどくささは変わらない。この記事では、これを解決するために作ったgulperコマンドについて紹介した。