タスクランナー起動用のバッチファイルを作る

久々にgulp触ったらバージョンが3から4になってて、
gulpfile.jsをあっちゃこっちゃ書き直さないといけなくなってしまった……。
え？今時まだgulp使ってんのって？　ｳﾙｻｲﾅｰ、案件の都合だよう。

やりたいこと

毎回毎回コマンドプロンプト立ち上げて『gulp』って打つことすらめんどくなってきたので、
バッチファイルにしてワンクリックで起動させるようにします。
ついでにGit経由で他の環境とかで起動する場合もよしなにやってくれるように調整しておく。
自分がWindowsの民なのでコマンドプロンプトって書いてますが、マカーな方はターミナルを思い浮かべてください。

こんな感じが目標。

node_modulesってのはNode.jsのパッケージが諸々詰め込まれるフォルダのことで、
中身を直接触ってどうこうすることはないため（ないよね？）
Gitで管理対象から外すとよいです。

Git+タスクランナーでのディレクトリ構造を考える

ちょっとコマンドプロンプトのことを忘れて一旦Gitの頭にしてください。
今回の例では、リポジトリのクローン直後にこんなディレクトリ構造になると仮定します。

また、.gitignoreの記述例も記載しておきます。

突然Gitがどうのとか言いだしてなにいってだって感じかもしれませんが、

srcディレクトリ：PugやSass、圧縮前画像など。当然各ファイルをバージョン管理する
distディレクトリ：HTMLやCSS、圧縮後の画像など、変換後のファイルが出力される
→変換前のファイルがあるならバージョン管理しなくてもよくない？？
（でもJSライブラリは圧縮とかしないしそこだけ除外しよ）

という発想でこのような例を挙げましたよー、って話です。
タスクランナーの起動を自動化することが本記事の目的ですが、
それによって生成されたバージョン管理する必要のないファイルは極力無視したい
という裏のテーマがあるってことでしゅ。

とりあえず理念的な話は済んだのでGitのことはもう忘れていいです。

作業フローの改善

上記の例を踏まえて、これまではタスクランナーの初回起動時は
下記のようなそれなりに面倒な工程が必要でした。

これを、こうする！

…ってのが目標でス。
ゆえに、これからstart.batに色々書いていきましょうという流れになります。

実際にやってみた

ステップ１ とりあえずワンクリック起動

とりあえずコマンドプロンプトを起動する手間を省きたい人向け。
Gitとか使わないしぃ～、一回初期構築したらもう他のPCで作業とかするつもりないしぃ～
ってな人はこれでおしまいでもいいです。

@echo offは不要な表示を消してくれるおまじない的なやつです（省いてもよい）。
二行目でカレントディレクトリを指定して、三行目でgulp起動というシンプルな内容になります。

なおGrunt使ってる人は三行目が『cmd /k grunt』になったり、
憔悴ニキ（？）の場合は『cmd /k npm run』なったりします。

ステップ２－１ 初期構築もやってもらう

初期構築、すなわち「npm install」のやつも自動でやってもらいましょう。
package.jsonに書かれてるもろもろをインストールする工程ですね。

node_modulesフォルダがなければnpm installから始めて、終わったらwatch処理が走ります。
（remってやつはコマンドプロンプトにおけるコメントです）

…しかし、今回の例の場合はこれだけだと正しく動作しません。
なぜなら、Git上では元ファイルしか管理しないという先述の都合上、
npm installを行った段階では/dist内の各ファイルが生成されていない状態だからです。

ステップ２－２ 初回のファイル生成も自動化

『npm install』後、/dist/index.htmlがなければ『gulp dist』で
/dist配下のファイルやフォルダを生成するようにしました。
ついでにコマンドプロンプト上に説明テキストも表示。

『gulp dist』って何さって話ですけども、タスクランナーの設定ファイル（gulpfile.js）に
もろもろ出力するための記述を書いといた感じです。
長いけどこんなんです（109行目参照）。

watchタスクは対象のファイルが”変更されたら”行われる内容なわけですが、
npm install直後だと.sassや.pugファイルが更新されることはないでしょう。
なので、初回起動時用に諸々のファイルを出力するタスクも設定しておく必要があったわけです。
理屈としてはGruntでもnpmでも同じなので適宜処理を書いておいてくだしあ。

ステップ３ エラーを添える

ついでにnpmやgulpコマンドが使えない環境でバッチファイルを起動した場合は、
それっぽいエラーを表示させるようにします。

npmコマンドが使えない場合は:error01、
gulpコマンドが使えない場合は:error02の内容を表示させるようにしました。

なんとバッチファイルに関数なんてものはないので、
gotoによるゴリ押しソリューションとなっております。

終わりに

いかがでしｔ…おっと、これで締めくくると警告されちゃうんだった。
平成の始まりに集合知の象徴と謳われたインターネットなんてものも今や完全に崩壊して
イナゴの群れが夢の跡なマッポーワールドになってしまったんですわ。
あれ？　何の話してたんだっけ。

…えーと。エンジニアならさておき、Web屋的には黒い画面に触れる機会はあまり少ないかと。
出来ることなら触りたくないなーって人も多いかなーと思ったので、
気を効かせてバッチファイルなんぞ自作してみた次第であります。

また、今回はGit導入が前提の作業フローを想定しているためこんな感じの内容になりましたが、これが個人作業だとまた違った感じになってくると思います。
node_modulesディレクトリをプロジェクトを跨いで読み込みたい！とかなったりね。
そういう場合はバッチファイルの設定もまた変わってくることかと思います。

まあここまで真面目に書いといてアレなんですが、バッチファイルの作成なんて
所詮一工程の効率化のために行われるものであって、別に必須の仕事ではないわけです。
こうした僅かな効率化のために半日費やす羽目になったりするのはアホなので（ブーメラン）、
進捗が求められる場面では多少非効率でも無心で作業を行うことも選択の一つではある、
と付け加えておきます。

おまけ

今回の例のようなディレクトリ構造でFomantic UIってフレームワークを使う機会がありまして。
（去年の8月で更新が途絶えてるSemantic UIを有志が引き継いで開発してるやつ…だと思う）

『npm install』時に初期設定を尋ねられるんですが、これも省略したいなあと思ったんですよね
（どうせ無視してEnterキー数回押すだけだし）。
ついでに言えば、フレームワークを直接弄ってどうこうすることはないですし、
こいつもGit監視の対象外にしたかったんで、下記のようなことをしました。

・semantic.jsonという設定ファイルの記述を変更
“autoInstall”: trueという記述を加筆して、npm install時の設定入力が省けるようにします。
また、.cssや.jsファイルの出力先を/dist/lib/semantic/配下に設定しておきます。
（”source”部分はどうでもいいので変更しない）

・.gitignoreを変更
/semanticフォルダとsemantic.jsonにて指定したフレームワーク関係の出力フォルダを
Git監視外に設定。

なお、Fomantic UI（Semantic UI）だからこんなんで済んでますけど、どうやら
Bootstrapの場合もっとダルそうなので、Sassファイル側で
/node_modules/bootstrap/配下を@importさせるのがいいっぽい。
試したことないから知らんけどー。

個人的にはそもそもCSSフレームワークなんて要らなくない？派なんである。
!importまみれのルールセットの何がありがたいんだか～…なんて毒づいてみたり。