2022年6月の時点でGulpについて書くのは抵抗が無い訳で無い、とは表立って言いませんが

• Welcome!/Home
• 楽屋裏話
• 2022年6月の時点でGulpについて書くのは抵抗が無い訳で無い、とは表立って言いませんが

Created at 20 June 2022, modified at 20 June 2022.

自分はピンのプログラマ（自称）です。
とは言え、リアルでフロントエンド系の知り合いや顔見知りは居ても、特に近年は例の影響もあるので直接顔を合わせる機会も無くなり、それ以前に、常時深く付き合いがある訳で無いので、フロントエンドのトレンドが全く分からない、プラス、Node.jsやJavaScriptに詳しくない、という前提です。
更にはGulpのversion3の頃ならともかく ^[1] 、現時点での選択肢はWebpackやLaravel Mixもある訳で…有名ドコロだと…他にも自分が知らないだけで色々あるかもしれません。

目標

自分がGulpを使い出したのはversion3の頃で、その頃から後述する「目標」がありました。
しかし、自分のスキル不足や情報収集能力不足で残念ならがら達成できず、もしくは場当たり的に対処していたため、「型」を体感として覚えていない状態でした。^[2]
その後、Gulpがversion4になり、Gulp自体の記述方が変わり、更には、Sass/SCSSの記述方やコンパイルの実装も変わり、画像圧縮も従来の方法だと対処できなくなり、と、これがフロントエンドのパワーなんだな、と感じると同時に、今まで学習した事柄を捨てて新たに学び直す必要もあるので、正直、面倒だなぁというのがあります。

そしてその前述した目標ですが、具体的には下記になります。

1. ローカル環境と本番環境の出力ディレクトリの完全分離 ^[3]
   出力ディレクトリの削除は、Gulpのdelで行っても上手く連動しないケースがある模様なので ^[4] 、npmスプリクト側（rimraf）で対応
2. ソースマップは本番環境では不要
   hoge.min.cssの様なリネームまでは望まない
3. HTML・CSS・JavaScript・画像の圧縮は本番環境のみ
   現在、HTML生成は、例えばJade/Pugを用いてGulpで行うのではなく、EleventyでNunjucksを使用

実装

それらを全て包含したソースコードですが、実はこのサイトではなく、このサイトの構築に遅れて同時期に作成した、自身のポートフォリオ…ではありませんが、ランディングページが近いかな、私の名刺に記載しているproject2501という屋号のサイトになります。
いずれこのサイトにもマージする予定ですが。

• project2501のウェブサイト
• project2501のGitHub

project2501は1枚ページですが、ざっくり説明すると…（CSSのWebブラウザ互換の組み込みなど、色々と足りない機能はありますが）

1. Gulpで行なうタスク
   1. Sass/SCSSコンパイルと圧縮
      ローカル環境のみソースマップあり、本番環境のみ圧縮
   2. JavaScriptの圧縮
      本番環境のみ
      concat/連結やトランスパイルは行なっていない（勉強不足で分からない）
   3. 画像の圧縮
      本番環境のみ
2. Eleventyで行なうタスク
   1. YAML+MarkdownとNunjucksなどによるコンテンツの生成
   2. パススルーファイルコピー
   3. ファイル更新の監視とWebブラウザの自動リロード

以前だとgulpfile.jsはタスク単位でファイル分割していましたが、今はしていません。^[5]

そしてこれら、前述の投稿（2022年5月から6月にかけて、このサイトをほぼ完全リニューアルした件）でもチラッと記述した通りで、
「Gulpを直接起動 ^[6] 、npx gulp hogeするのではなく、npmスクリプト、package.jsonのscriptsで色々と操作や制御しようよ、どうせ黒い窓使うのには変わらないのだから」^[7]
になりますかね。
プラス、npmスクリプトでnpm-run-allを使えば、かなり柔軟に対応できる気がするのは、理論上はGulpだけでなく、並行して/順次に ^[8] 、Laravel Mixなども併用できる点ですね。
例えばLaravel MixでSass/SCSSのコンパイルなどを行ない、他のタスクはGulpなどで行なう、という芸当も可能になるので。 ^[9]
この利点は、将来、前述した様な各タスクのトレンドや栄枯盛衰にも追随できる点、つまり、タスク単位で捨てる事を前提とできる、かなと思っています。
および、是が非でもGulpだけ、Laravel Mixだけ、みたいな事をしなくていい点もあると思います。

ドツボ（どうでもいい話）

一方で、タスクの切り分けが上手く行っていないと、変なトコロでアタマを抱える事態に遭遇しますが。
例えば下記の状態で、上手く行かない原因がまさか自分にあるとは思わず、でした。

本番環境の画像の圧縮タスクを含むnpmスクリプトを起動した場合…

1. コミットのバージョンが違いますが、前提として、package.jsonのproduct:buildを起動
2. まず最初に、gulpfile.jsの各種タスクが稼働する中で、画像圧縮タスクが起動
3. 次いで、Eleventy.jsのaddPassthroughCopyで、画像ファイルを上書き

詰まるトコロ、ローカル環境ではGulpで画像圧縮を行わず、実質、ファイルコピーした後、次に起動するEleventyでパススルーコピーしていたので気付かなかった、気付くのに遅れた、という初歩的なミスをしでかしていました。
ですが本番環境では、レスポンス時間的にも画像圧縮を行なっているっぽく感じるのに、何故かオリジナルとのファイルサイズが同じ、という。
しかも、敢えてnpx gulp imageや（今は存在しませんが）npm run product:gulp:image単体の起動だと上手く行ってるのに、みたいな。

および、Webブラウザの自動リロードも、もしかするとドツボになるかもしれません。
幸いな事にElenentyにはaddWatchTarget・setWatchThrottleWaitTimeという機能がありましたので、ミリ秒を適当に決め打ちして実現しています。
無ければ無かったで、F5を押下すればいいだけでなので、そこまでこだわっていませんが。

まとめ

改めてまとめますと、下記の様に言えるのかなと思います…と言うか、これが自分の「型」なのかなと思います。

1. Gulpなどタスクランナーはnpmスクリプトで起動
   cross-envを使用して、cross-env NODE_ENV=product npx gulp hogeなど、本番環境とローカル環境を分けて記述
2. npmスクリプトの各スクリプトは、npm-run-allで起動順を制御
3. gulpfile.jsのgulp-modeで、npmスクリプトの引数（本番環境とローカル環境）を制御
4. 各タスクは、例えばmode.develop()・mode.product()で、ソースマップの追加や圧縮などの処理を分ける

（余計な一言）2022年6月の時点でSass/SCSSについて書くのは抵抗が無い訳で無い、とは表立って言いませんが

以下、余計な一言…で済まない長さですねぇ。

自分、最初はBootstrapでした。
当時、身近だとFoundation勢もおられた記憶です。
「へぇ、そういうのがあるんだ、PHPやRubyなども様々なフレームワークがあるので、CSSのそれも車輪の再発明しなくていいよね」と、プログラマ視点だと素直にそう思っていました…が…まぁ、当時から色々と色々（意味深）だったと思いますが。

その後、半分以上は趣味の面もありますが、HTMLのテンプレートと共に、CSSフレームワークも忘れた頃に定点観測する様になりました。
例えば下記、自分は「軽量/lightweight」にこだわっておらず、検索しやすい単語なので使っています。 ^[10]

• 100+ Best CSS Frameworks For Responsive Design
• Lightweight CSS Frameworks - A curated list - DEV Community
• troxler/awesome-css-frameworks: List of awesome CSS frameworks in 2022
• 23 Responsive And Lightweight CSS Frameworks

ざっと記憶を振り返り、「おっ」と思ったCSSフレームワークは下記ですね…開発が停滞・ストップしているのも含みますが。
なお、斜体のそれは、過去、機会を見付けて実践的な使用をしました。

• Bourbon / Neat / Bitters / Refills
• Milligram
• Skeleton
• Materialize ^[11]
• Bulma
• Buldy
• CodyHouse
• Pico.css ^[12]
• Susy ^[13]

で、自分はCSSフレームワークに何を求めているのか？ですが。
それ自体の軽さや使いやすさでは無く、Bootstrapで言えば、Bootsnippだと物足りないかな、Start Bootstrap程度のテンプレートが欲しい、と言うのが、今となっては本音ですね。
と言うのは、自分はゼロベースでWebサイトデザインができないし、今後はしないと思うので。

とは言いつつ、Bootstrapの次に取り組んだBourbon/Neat/Bitters/Refillsは、Refillsを使いたいから、Bourbon/Neat/Bittersを使える様に勉強した、その過程でSass/SCSSも使える様になった ^[14] 、になります。 ^[15]
ところが現在、BourbonとBitters以外、開発が終了していますので現在は使用していません。
そしてこの流れだと、CodyHouseが近いかな、なのですが、結局は使っていません。^[16]

という様な観点からだと、HTML5 UP!、自分的にはサイコー！なんですがねぇ…今後はもしかすると厳しいかな、と言うのが本音ですね。
具体的には、Sass/SCSSは今後、仕様/実装変更が生じても何とかする、という意思はありますが、JavaScript/jQueryに関しては、完全にお手上げ状態になる可能性が高いですね。
そしてこれがSass/SCSSを使用しているので、自分もそれを使用している、になります。

ところで先述したCSSフレームワークに敢えて含めていないのが、Tailwind CSSですね。

Eleventyで使う場合、@tailwindcss/typographyが無ければ、完全に詰んでいたと思います…程度までは潜りました。
本音で言うと、HTMLのタグのクラスにずらっと記述するのに抵抗があったのは事実です。
しかしそもそもNunjucksなどでテンプレートを作成すると、それ以降、そんなに修正する事も無いだろうから、そこは了解しました、です。
ですが、Prettierなどで半強制的にコード修正される場合はともかく、HTMLはフリーフォーマットで記述しないと ^[17] 、後々のメンテナンス可読性がキツくなりそうな気が…という事を考慮すると、Pugでの使用はチョット厳しいかな、です。
とは言え、今のトコロその可能性は無いですが、EleventyからNext.jsやGatsbyに移行した場合、おそらくはTailwind CSSを第一に考えるのではないかと思いますね。