メタ言語のコンパイル環境を作る！続きです。前回はメタ言語を選定しました。今回は言語をコンパイルするタスクランナーを選定します。
【目次】
- メタ言語のコンパイルはタスクランナーで行う
- タスクランナー何を使ったらいいか
- 代表格はGulp
- 脱Gulpの流れ→npm-scripts
- Gulpとnpm-scripts、どちらから始めるか
- 最後に：まずはGulpに入門してみる！
※参考：前回記事
フロントエンドのメタ言語のコンパイル環境を作る（言語選定編） - クモのようにコツコツと
※参考：Web開発環境についてのまとめ
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というフロント開発３銃士 - 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を使われている方は多い様子。
メタ言語（SASS、Typescript、EJSなど）のコンパイル方法について調べています。
— イイダリョウ@ふろんとえんど・えんじにあ (@idr_zz) 2019年11月12日
皆さんはどの方法を使われてますか？
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に入門してみる！
ということで、Gulpかnpm-scriptsか迷いましたが、まずはGulpから体験してみようと思います！「脱Gulp」といってもそもそも「入門」しなければ違いが比較できないし「脱」もできないのでw
次はGulpをインストールして、何かしらのメタ言語をコンパイルしていく予定です。それではまた！
※参考：Web開発環境についてのまとめ
qiita.com
