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

gulp を知った時のメモ。

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

gulp is 何

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

実際の使い方としては、gulpfile.js に実行するタスクを javascript で定義して、gulp コマンドでそのファイルを実行する形です。gulpfile.js の記述形式は、javascript に触れたことがあれば直感的に理解できるものになっています。

Gruntやnpm scriptでのビルド

gulp と似たツールとして、先発の Grunt があります。少し前まではプラグインの充実度合いから Grunt が選ばれることが多かったみたいですが、後発である gulp もプラグインが充実してきてからは勢いを付け、今では gulp 派が多い印象です。

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

ただ、この便利な gulp や Grunt にも、批判的な意見がいくつか挙がっている模様です。

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

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 でもいいかなという印象です。おわり。