gulpとかGruntとかの概要をまとめる

gulp を知った時のメモ。

Rails で開発していた時に scss(sass) に触れて、便利だなーと思ってました。で、最近静的な Web サイトを作る機会があって、そこでも scss で書きたくて書いたのはいいのですが、いちいち手動でコンパイルや圧縮、自動ベンダープレフィックス付けするのが面倒くさい。Rails はその辺りをよしなにやってくれるので今まではあまり意識していませんでしたが、フレームワークを使わない場合でもなんとかならないかと思っていたところ、gulp を見つけました。

gulp is 何

一言で言えばビルドツール(タスクランナー)です。ファイルのコンパイルや圧縮で使われるケースが多いみたいですね。scss(css) や pug(html) などは、あくまでも効率的な開発のために提案されたレイヤーであり、Web ブラウザが理解できる形式にはなっていません。なので、修正の都度コンパイルして普通の css や hml 形式にしてあげる必要があるのですが、手動でやるのも骨が折れます。gulp はそのようなビルドタスクを自動化してくれるツールです。

使い方としては、gulpfile.js というファイルに実行するタスクを javascript で定義して、gulp コマンドでそのファイルを実行する形です。gulpfile の記述形式は、普段から javascript に触れていれば直ぐに理解できると思います。

Gruntやnpm scriptでのビルド

gulp と似たツールとして、Grunt があります。関係的には gulp が後発ですね。前まではプラグインの充実度合いから Grunt が選ばれることが多かったみたいですが、gulp のプラグインが充実してきてからは Grunt よりは gulp、という人が多いみたいです。

Grunt は処理毎に成果物をファイルに書き出して次の処理に受け渡しているのに対して、gulp の方は処理間の成果物のやり取りを主にメモリ内で済ませているため、高速であるというのがその理由の一つです。所謂ストリーム処理というやつですね。あとは gulp では Grunt と比べるとコード量を抑えられたり、並列処理が得意であるといった強みがあります。というような感じで、新規でタスクランナーを導入する際には gulp が選ばれることが多そう。

しかしここ数年で、この gulp や Grunt に批判的な意見がいくつか挙がってきている模様です。

[意訳]私がGulpとGruntを手放した理由

Grunt/Gulpで憔悴したおっさんの話 - MOL

【Node.js7.5対応】gulp.js/Gruntを卒業すべき3つの理由とgulp非依存の本格タスクランナーの作り方 | 東京上野のWeb制作会社LIG

gulp 等で開発時のレイヤーを増やしてしまうと、その分問題が発生し得る箇所が増え、複雑性も増すので危険。また、プラグイン等への理解も要するため、学習コストも増える。であれば、gulpやGruntの一つ下のレイヤーでその土台となっている npm script を使えばいい。npm script は十分に高機能であり、そもそも gulp 等を使う必要はない。

ということですかね。gulp/Grunt 離れしようと。ただ、npm script は Shell に依存しているため、クロスプラットフォーム対応はされていないという問題があります。これは適切な npm パッケージを使って OS 間のコマンドの差異を吸収してあげればなんとかなるみたいですが、少なくともそのあたりを意識する必要があるということはデメリットとして挙げられそうです。あとは、gulp 等に比べると少々可読性に劣るということもありそうです(好みではありますが)。

まとめ

gulp 周りについて書いてみました。gulp は使い易いツールだと思いますが、先に挙げたような問題もあります。大規模でデバッグや依存関係が複雑になりそうなプロジェクトでの使用は少し怖いですが、小規模で簡易的なモノをサクッと作るくらいであれば、gulp でもいいかなという印象です。おわり。