コーダー日誌
公開日：2019/10/04
「雑い」シリーズ第2弾はgulpです。
旧版のコーダー日誌はjsで共通部分を挿入したりはしてたのですが、基本まるっと直書きだったので、ちょいと楽するためにリニューアル（？）にあたり、gulpを導入してみました。今更感ありますが。
gulpを使うにはNode.jsが必要なのでそちらの予備知識も。npmとかyarnとかも。
gulpの導入とかいって、最初のリンクはgulpいらないんじゃね？っていう話なのですが・・・。こういうことも知った上で、導入の検討をするのも大事かなってことで。
node.js＋gulpの導入でnpmというパッケージ管理アプリを使うことになりますが（node.jsに付属しています）、npmではなくyarnを使う人もいます。
自宅のwin10マシンではnpmだけでなんとかなったのですが、某企業のmacマシンの場合はyarnでないとパッケージがインストールされなかったり、いろいろあったので（マシンの環境にもよると思いますが・・・）、あたまの片隅にでも入れておくと良いかもしれません。
なお、一連の作業をするのに、winマシンではコマンドプロンプト、macマシンではターミナルというアプリケーションを使います。OSに標準装備されているものなので、とくにインストールは必要ありません。
winマシンではアクセサリに入ってたのに・・・win10はアクセサリがどこにあるの？？ってなりますが、ショートカットキーで起動できます。［Windows（マーク）］キー＋［R］キーで［ファイル名を指定して実行］ダイアログを開き、「cmd」と入力してokをクリックすればおけー。
macマシンでは「アプリケーションフォルダ」内の「ユーティリティフォルダ」にあるはずなので、探してみてください。
コマンドプロンプトやターミナルはデフォルトで真っ黒（真っ白）ウィンドウが立ち上がり、テキストエディタかっていうぐらいぶっきらぼうな画面で戸惑うかもしれませんが、コマンドを使って操作します。
gulpの導入ではcd（change directory）を知っておけば十分かと思いますが、コマンドについてはgoogle先生たちにお願いしてみると、たくさん解説があるので、困ることはないと思います。
どんなファイルが入っているのか調べるコマンドや、ファイルを削除するコマンドも知っておくと便利かと思いますが、node.jsやgulpの導入を説明している記事にはたいていコマンドが記述されているので、コピペしていくだけでなんとかなります。
実行中の処理を中断するショートカットキー［Ctrl（control）］キー＋［C］キーも憶えておくと何かと役に立つと思います。
コマンドプロンプトやターミナルで使用するコマンドやショートカットキーはwinとmacで大きな違いはないので（たまに違うのもありますが）、どちらで憶えても大丈夫だと思います。
node.js＋gulpのインストールまでおわったら、web開発しやすいように必要なモジュール（パッケージ）を追加していきます。
最後のリンクはwebpackとか言ってますが、gulpでも同じ問題が起こるかと思うので、参考にしてください。
コーダー日誌では、sassを使えるようにしたり、webページのヘッダーなどの共通部分を各ページで利用できるようにするejsというのをいれたり、画像圧縮をしてくれるパッケージを入れたりしています。
ejsの使い方は以下が参考になると思います。
ちなみにejsと似たようなのにgulp-html-extendというものもあります。
gulpを育てるにはpackage.jsonやgulpfile.jsにいろいろ記述する必要がありますが、リンク先を参考にgoogle先生たちに訊きながらごにょごにょすれば、なんとかなるんじゃないかな。
ちなみにpackage.jsonやgulpfile.jsがあるフォルダにはpackage-lock.jsonというファイルもできるかと思いますが、このファイルは何もせず放置しておいて良いです。
node.js＋gulp＋モジュール（パッケージ）のインストールではエラーがつきものかと思われます。
大抵は必要なファイルがないよ！というエラーだと思いますが、エラーメッセージの単語をうまいこと抜き出して、google先生たちに訊いてみると、ジャストな解説があったりします。
引っかかるところ、だいたい同じ！なかーまはたくさんいらっしゃいます。
複数種類のタスクランナーを使う予定ないし、とりあえずいらないかなぁと思って入れなかったので後回しになりましたが、Node.jsのバージョンアップによって、エラーになったりいろいろ事件が起きたりするので、Node.jsのバージョン管理についてもメモしておきます。
なお、win環境ならnodist（Chocolatey）、mac環境ならnodebrew（homebrew）を使うのが一般的なようです。
gulpの導入には直接関係ないのですが、いろいろ調べているときに気になった記事をメモしておきます。
go to homeindex