Gulp と Webpack の採用基準

今日は、社内で運用しているCSSフレームワークの改善を行った。

gulp + sass + FLOCSS崩れ + Jade という構成なのだが、策定から5ヶ月ほどたって、ちょっと技術選定を見直そうかと思いたった。

webpack vs gulp

最近のOSSを見ていると、タスクランナーとしてwebpackを採用しているものが数多くなってきている。

弊社のフレームワークでは gulp をタスクランナーとして採用しており、webpackを採用してもいいのかなー？と思った。その上での考察。

gulp はタスクランナー

そもそもタスクランナーはどんな定義だっ？なのか。 ビルドツールとは違い、 「タスク」を自分で定義して、それを実行することに特化したツール って感じか。

まぁ、個々のソフトウェアの操作を タスクランナーの api を利用してタスクとして定義し、自動化するものと考えている。

webpack はビルドツール

その点、webpack はビルドツールだ。

webpack はどちらかというと browserifyと対をなすもの。

設定ファイルにエントリーポイントとアウトプットファイル、その他もろもろ定義しておくと、その通りビルドしてくれる。

どちらを選ぶか

正直、きっと今のトレンドとしては npm run script だろうが、チームスキルがまだ満たないので取り敢えず採用外。

gulp は なんだかんだ一番汎用性はあるのかなと思う。これまでの知見を得てもWeb上にいくらでも転がっているし。

その点、webpackは、結構学習コストが高いと感じた。 そもそも webpack の概念を理解するのも時間がかかりそうな気がする。

webpack で sass や jade (pugになってた) をファイルとして生成するのは、そもそもwebpack の概念にあっていないように感じた。

サイト制作においてwebpackを使うようなことはない

自社内フレームワークはあくまでもWebサイトが対象なので、gulp で事足りると判断した。わざわざコストをかけて webpack で実行する必要性は感じられなかった。

もちろん、Vue などで簡単なSPAを構築するときは今でも採用しているものはある。 あくまでまWebサイトって考えた時のこと

というわけで、まだしばらく gulp で頑張ろうと思った。