クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した

メタ言語のコンパイル環境を作る!続きです。前回はメタ言語を選定しました。今回は言語をコンパイルするタスクランナーを選定します。

【目次】

※参考:前回記事
フロントエンドのメタ言語のコンパイル環境を作る(言語選定編) - クモのようにコツコツと

※参考:HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com

メタ言語のコンパイルはタスクランナーで行う

以前、WebPackでメタ言語のコンパイルができそうと思っていた。しかしWebPackの本来の役割は複数のファイルを統合する「モジュールバンドラ」であって、何でもありの銀の弾丸ではないと!

※参考:webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮) - クモのようにコツコツと

それではメタ言語のコンパイルは本来何で行うべきか?「タスクランナー」で行うべし!

タスクランナーとは何ぞや?

簡単に言うとフロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール

  • 画像ファイルの圧縮
  • SassからCSSへの変換
  • CSSのminify
  • JSのminify

※参考:非フロントエンドに説明するタスクランナーとは - Qiita

ふむふむ。メタ言語のコンパイルのみならず、画像の圧縮やCSS、JSのminifyもやってくれると。

minifyというのはあれだね。よくライブラリで本体ファイルのほかに「min」とついている改行などがなくなった軽量ファイルだ(jquery.min.jsとか)

※参考:https://wa3.i-3-i.info/word14269.html

面倒なタスクを自動的に走らせるツール=「タスクランナー」というわけだ。

タスクランナー何を使ったらいいか

では、タスクランナーは何を使ったらいいだろうか。調べたらいっぱいあった。。

※参考:【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう | WEBA

同じ書式で比較されていてとてもわかりやすい記事!前述のWebPackも挙げられている。

  • gulp
  • npm script
  • webpack
  • Rollup
  • Fusebox
  • Parcel

増え続ける、フロントエンド地獄…2019年だからなw

代表格はGulp

タスクランナーの中でよく聞く名前は「Gulp」!Babel、Webpackと並んで「フロント開発三銃士」と称される!(この名称、好きですw)

※参考:gulpとbabelとwebpackというフロント開発3銃士 - Qiita

かつては「Grunt」というイノシシのアイコンのツールがタスクランナーの先駆者だったらしい。今はGulpが主流になったようだ。

※参考:絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

脱Gulpの流れ→npm-scripts

しかしながら、Gulpには学習コストやプラグイン依存性の問題などがあり「脱Gulp」という流れもあるようだ。

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

脱Gulpの代表格は「npm-scripts」!

※参考:npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ

  • 基本的に package.json だけで設定と処理が完結する
  • タスクランナー独自のルールを学習しなくて済む

「npm」はNode.jsのパッケージ管理ツールで、その設定ファイルが「package.json」。

※参考:いまさら聞けない!npmのこれだけは知っておきたい基礎知識 - WPJ

このpackage.jsonに搭載されているタスク管理機能が「npm-scripts」と言ふ。

Gulpとnpm-scripts、どちらから始めるか

ではこれからタスクランナーを体験するとしたら、Gulpとnpm-scripts、どちらがいいのだろうか。Gulpの問題点をクリアしてよりシンプルになっているのがnpm-scriptsなのであれば、もう最初からnpm-scriptsでええやん、という気もしてくる。

しかしながら前回のメタ言語選定と同じで「業界でよりスタンダードに使われている技術」を知っておきたい、という気持ちもある。例えばGulpがGruntのように現時点でだんだん使われなくなりつつある技術ならばやる必要はないかもしれないが…。

個人的にTwitterでアンケートをしたところ、やはりげ時点でGulpを使われている方は多い様子。

Googleトレンドを見てみる(Gruntも加えてみた)

うーむ、やはりGulpの方が高いようだ。(ちなみにハイフンの「npm-scripts」だと結果がほどんと出なかったためスペースの「npm scripts」にしてみた)

求人サイト「Green」で検索してみる。

キーワード ヒット数
Gulp 156件
Grunt 36件
npm-scripts 1件
npm scripts 1件
nmp 37件

「npm-scripts」は少なすぎたので「npm scripts」や「npm」自体でも検索してみたがGulpはやはり件数が多い。

「indeed」でも検索してみる。東京都にて。

キーワード ヒット数
Gulp 389件
Grunt 97件
npm-scripts 0件
npm scripts 0件
nmp 137件

こちらも似たような割合の結果になった。

最後に:まずはGulpに入門してみる!

f:id:idr_zz:20191114061728j:plain

ということで、Gulpかnpm-scriptsか迷いましたが、まずはGulpから体験してみようと思います!「脱Gulp」といってもそもそも「入門」しなければ違いが比較できないし「脱」もできないのでw

次はGulpをインストールして、何かしらのメタ言語をコンパイルしていく予定です。それではまた!


※参考:HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com