読者です 読者をやめる 読者になる 読者になる

kitak.blog

Kみたいなエンジニアになりたいブログ

とあるプロジェクトでGruntからGulpに乗り換えた

Frontend Build

とあるプロジェクトでGruntからGulpに乗り換えたので、雑にまとめておく。
主観もけっこうあるので、そんなもんなのかくらいで読んでください。

乗り換えの理由

  • Gruntのメンテナー行方不明問題をあちこちで耳にするようになった。
  • プロジェクトのGruntの設定ファイルが、Yeomanのテンプレートから生成されたもので、無駄な記述が多く、いずれにせよどこかのタイミングで整理する必要があった。
  • イライラするほどではなかったが各種ファイルの変換に時間がかかっているように感じていた。
  • 時期的に今やるしかないな、と思った。

規模と内容

設定ファイルの規模は、行数が約600行、使っていたGruntプラグインは約30個というかんじだった。

内容は、よくあるようなcoffee, scssの変換、開発用サーバーの起動、本番で配信するファイルのビルド(concatとかminify)をおこなっている。
この他に、ユニットテストの実行やwebフォント用のフォント生成、スタイルガイドの生成など。

方針と行ったこと

Gruntが汎用タスクランナーなのに対して、Gulpは「ファイルのようなもの」を入力として受け取って、色々変換して「ファイルのようなもの」に出力するのに特化したツールであるという認識を持っている。
それを踏まえ、とりあえずはcoffeeやsassのような「ファイルを別のファイルに変換するタスク」を移した。

Gulpのプラグインを使うときは、https://raw.githubusercontent.com/gulpjs/plugins/master/src/blackList.json を参照して、自分が使おうとしているプラグインブラックリストに入っていないか調べた。

残ったGruntのタスクを眺めて、普通にコマンドを実行すれば済むタスクを消して、npm run-scriptから実行するようにした。
開発用サーバーは、http, livereloadサーバーとして動く小さいスクリプトを用意して、npm run-scriptから実行するようにした。

かかった時間

設定ファイルの書き換えにかかった時間は、大体一日だった。スムーズにいけば、半日で終わったと思う。 GruntとGulpで同じことをするプラグインのオプションの違いや、Gulpプラグインのバグにやたらハマってしまって、プラグインやそのプラグインの依存しているモジュールのコードを読んだりしたので、少し時間がかかってしまった。

結果

比較してもしょうがないかもしれないが、乗り換えた後のGulpの設定ファイルは行数は約300、利用しているGulpプラグインの数は約20個だった。 しっかり計測はしていないが体感でタスクの実行にかかる時間が短くなったような気がする。

以前から全てのタスクをnpm run-scriptを通して実行するようにしていたので、GruntからGulpに移行するにあたって、普段開発で使うコマンドの変更を共有したり、デプロイタスクを修正する必要はなかった。 統一的なインターフェイスとしてのnpm run-scriptが効いた気がする。

反省

今回のように書き換えるなら、最初からGulpを使って、vigetlabs/gulp-starter · GitHub を参考にしつつ、プロジェクトの成長と共に育てていけばよかった。 元々のGruntの設定ファイルがYeomanのテンプレートのコピーだったけど、何分フルスタックなかんじだったので、冒頭で書いたように不要な記述が多かったり、フルスタックゆえにアプリケーションの事情に合わせて修正するのがきつかった。
Yeomanのテンプレートのディレクトリ構成やGruntやGulpの設定ファイルは、参考にするのはいいかもしれないけれど、継続的に開発する・長い期間メンテナンスするプロジェクトで、そのまま使うのはよくない。(プロジェクトや設定ファイルの規模にもよるかもしれないが)

Gruntで実現していたことを最終的にGulpでもできているかどうか保証する術がなくて少し不安だった。目視での確認はつらい。実際に一個ポカをやらかしてしまった。
Serverspecのファイルリソースをつかってテストを書くか、Serverspecを使わなくてもファイルの存在や内容のチェックをする簡単なスクリプトを書きながらやればよかったな、と反省した。
今回のような移行に限らず、設定ファイルのリファクタリングのために使えると思う。