“学習しては忘れ”を繰り返してきた「Gulp」への再入門。今度こそ身につけるために記事を書いてみた

Webサイトを制作する時に細かい作業を自動化してくれる「Gulp」というツールの話をします。

数年前（2017年頃）に断片的に（時にガッツリと）Gulpのことを勉強した事があるのですが、学習した後、あまり使う機会がなく、2019年5月現在、久しぶりに必要に迫られてGulpを使おうとしたら・・・何もできませんでした。
きれいさっぱりすべてのやり方を忘れてしまっていました。
もとより所謂「コード」や「黒い画面」が苦手だったのですが、ここまで完全に忘れると、逆に爽快なくらいです。

この記事は、Gulpを思い出すため、色々な事を調べ、なんとか理解し、記事に落とし込んだものです（この記事を書き始められる状態になるまで、多分24時間以上Gulpの事を色々調べて試行錯誤していました）。

はじめに：勉強し直すことにしたキッカケ
すっかり忘れてしまっていたこと
勉強しなおすにあたり、参考にした記事
復習0：準備しておくモノ・コト
復習1：Gulpで出来ること（一例）
復習2：Gulpのインストール方法
復習3：Gulpのインストール後にやること
復習4：Gulp関連で、ターミナルにてよく使いそうなコマンド（色々調べた）
1. Gulpを使う上で必須なコマンド
2. 必要に応じて使うと便利
復習5：色々なメモ（間違っているかもしれない）
復習6：自分用メモ。もし今後またご無沙汰になって久しぶりに触る事があるとするなら…
最後に：参考にさせていただいた記事

はじめに：勉強し直すことにしたキッカケ

CSS GridレイアウトはIE11に非対応らしいけど、AutoPrefixerを使えば、IE11にも対応したコードを自動で生成してくれる
→しかし、AutoPrefixerを使うためにはGulpが必要

※一応Autoprefixer CSS onlineという便利ツールで代用も可能だけど、AutoPrefixer以外にも出来ることが色々増えるので・・・

すっかり忘れてしまっていたこと

Gulpを使うために何をインストールすればいいか
どうやってGulp本体をインストールするのか
プラグインをどうやってインストールするのか
どうやってGulpを動かすのか
どうやってgulpfile.jsを書けばいいのか（コレは今でも怪しいが）

などなど。ほとんど「初心者」に近い状態でした。

勉強しなおすにあたり、参考にした記事

絶対つまずかないGulp 4入門（2019年版） – インストールとSassを使うまでの手順 – ICS MEDIA

2019年5月、あらためてGulpを勉強し直すにあたり、上記の記事を参考にしました（他にも色々とチェックしましたが中心はコレ）。理由はなんと言っても記事の内容が「2018年12月」にアップデートされていることです。しばらくGulpに手を出していなかったうちにGulpもバージョンアップ（3→4）があったようで、記事の内容のメンテナンスは、とても助かりました。（というわけで、この記事はGulp 4に準拠して書いています）

復習0：準備しておくモノ・コト

ターミナル（Mac）
JavaScript（以下JS）への慣れ（命令を記述するためのgulpfile.jsは、JSファイル。そのためJSを触るコトを避けては通れない）
黒い画面を恐れない気持ち・英語のエラーメッセージを恐れない気持ち（自分に一番欠けており、なかなか克服できずにいるもの）
英語を恐れない気持ち（プラグインの説明ページはすべて英語。例えばこんなの。これを読まねばならない時もある）

復習1：Gulpで出来ること（一例）

Sass（.css）を基に、CSS（.css）を自動で生成
画像のサイズの圧縮
CSSの圧縮
CSSに、古いブラウザ向けのプレフィックスを追記
CSS Grid Layoutの記述にIE11向けのプレフィックスを追加
複数あるCSSファイルを1点のCSSファイルに統合する
JSの圧縮の自動化

※ただし、必要なパッケージ（プラグイン）を必要に応じてインストールする必要がある。例えば下記は「gulp-sass」というパッケージをインストールする時のコマンド。全く直感的ではない。かつて自分は、この時点で「もうやだ辞めたい」となった。

npx i -D gulp-sass

復習2：Gulpのインストール方法

手順0：Node.jsをインストールする

Gulpのインストールは、Node.jsをインストールした上で、コマンドラインにて行う。また、Gulpは、Gulpを利用したいサイトフォルダ単位でインストールするみたいだ。

手順1：Gulpを入れたいサイトフォルダに移動する

cd /Applications/MAMP/htdocs/gulp_test

※上記は、Macの場合の一例。アプリフォルダ内のMAMPの中にある「gulp_test」というフォルダへcd（Change Directory）しています。
※Gulpのインストール前に、フォルダ内のパーミッションを777にしておくと、インストールの際にパーミッションの問題でエラーが出る現象をある程度防止できます。

手順2：パッケージ管理ファイル「package.json」を作る

package.jsonは、現在どんなパッケージがインストールされているのかが記載されているファイル。

 npm init

と入力し、対話形式の問に答えていけば、自動で生成されるようだ。
(分からないところは空欄でEnter押していってOK)
なお、途中の質問を全部ぶっちぎってとりあえずpackage.json作りたければ、npm init -y と入力すればOK

手順3：ローカルインストール

この段階で、いよいよGulp本体のインストールに入ります。

npm i -D gulp

と入力すれば、今いるフォルダにgulpがインストールされる。インストールが完了すると、node_modulesというフォルダが出来上がる。

※iはinstallの省略形。つまり「インストールしろ」という意味
※-Dは-save-devの省略形。つまり「このフォルダ内に」という意味
※グローバルインストールについては、必要ないとのことなので、触れないでおきます。

復習3：Gulpのインストール後にやること

使いたいパッケージをインストールする
Gulpを動かすための命令ファイル「gulpfile.js」を作成
インストールしたパッケージを動かすための命令を「gulpfile.js」に記述する
命令の記述が終わったら、Gulpを動かす

基本的には、このような流れに集約されるという認識でOKかと思います。
以下で1つずつ見ていきましょう。

1. 使いたいパッケージをインストールする

たとえば、Sass（.scss）からCSS（.css）を生成したい時は「gulp-sass」というパッケージが役に立ちます。インストールするには以下のようにコマンドを入れればOKです。

npm i -D gulp-sass

※コレ以外にも多くのパッケージがありますが、ここでは割愛。一例と実装例は必ず使うタスクランナーGulpとGruntの基本コード9選 – ICS MEDIA が参考になりました。

2. Gulpを動かすための命令ファイル「gulpfile.js」を作成

touch gulpfile.js

・・・と入力すると、サイトフォルダ内に「gulpfile.js」という名前の空っぽのファイルが出来上がります。このファイルに、

どのパッケージを読み込むか
読み込んだパッケージをどのように動かすか
ファイルを生成する場合、どのフォルダに保存するか
記入した命令文を、どんなコマンドで呼び出すか

・・・などの内容を記述していきます。
(書き方にある程度ルールがあるとはいえ、JSによる記述なので、この記事を書いている現在も、まだ慣れていません)

3. インストールしたパッケージを動かすための命令を「gulpfile.js」に記述する

命令文はパッケージによって様々ですが、gulp-sassの場合は以下のような書き方のようです。

// https://ics.media/entry/3290/ より引用

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});

併せて、コンパイル元の「style.scss」をcssフォルダ内に準備しておき、次に進みます。style.scssには、テキトーに下記のように書いておきます。

div.test {
    padding: 10px;
    h2 {color: #c00;}
}

4. 命令の記述が終わったら、Gulpを動かす

Gulpの動かし方自体は、とても簡単。下記のコマンドを入れるだけ。

npx gulp

こんな内容のCSSが新たに生成されていたら、成功です。

div.test {
  padding: 10px; }
  div.test h2 {
    color: #c00; }

※scssファイルに更新があるたびに自動でcssを書き出し直すwatchという命令もありますが、まだアウトプット出来るほど理解が及んでいないため、この記事では割愛。

復習4：Gulp関連で、ターミナルにてよく使いそうなコマンド（色々調べた）

Gulpを使う上で必須なコマンド

npm init -y
空っぽのpackage.jsonファイルを作る
npm i -D gulp
Gulp本体をインストール
npm i -D ppppp
pppppという名前のパッケージをインストール
npx gulp
gulpfile.jsに記述されたタスク（タスク名=default）を動かす
npx gulp ttttt
gulpfile.jsに記述されたタスク（タスク名=ttttt）を動かす

必要に応じて使うと便利

npm ls –depth=0
インストール済みのパッケージ名とバージョンを確認する

npx gulp –tasks-simple
gulpfile.jsに記載されたタスク名だけをシンプルに表示する

npx gulp -v
インストールされているGulpのバージョンの確認

npm update -D
使っているパッケージを最新版にアップデートする

npm un xxxxx
パッケージ「xxxxx」のアンインストール（アンインストールに成功すると、package.jsonからもパッケージの名前が消える）

npx npm-check-updates
インストール済みのパッケージがアップデート可能かどうかをチェック

clear
入力欄をスッキリさせる

復習5：色々なメモ（間違っているかもしれない）

Gulpを使う上で必須の「npm」コマンドは、Node.jsをインストールしたことで使えるようになっているコマンド
インストールされているパッケージを一覧で出すには　→package.jsonを見に行けばOK
複数のタスクをnpx gulpで実行したい時は、defaultのタスクを、以下のように gulpfile.jsの末尾に書く
gulp.task(“default”, gulp.series(“xxxxx”,”xxxxxxx”);
Gulpのインストールの際にパーミッションがエラーになることがある場合は、sudoでインストールを試すか、フォルダ自体のパーミッションを777に修正しよう
カスペルスキーには気をつけろ。Gulpを走らせようとしてproxy関連のエラーが出たら、こいつを疑え
ネット上にはGulpのバージョン3の頃の「古い書き方」も多いので、知見を探す際は注意。
更新のたびにnpx gulpと打ち直すのは面倒なので、watch機能の使い方は必ず身につけておこう
gulpfile.jsの書き方は、バージョンも考慮に入れつつ、先達の皆様のブログを参考にしよう
パッケージごとのタスクの書き方は、とりあえずnpmjs.com見ればOK。ただ、あまりに古いプラグインは意図したとおりに動いてくれない可能性もあるので、一応各ページのlast publishは確認しておこう。1年以上前だったらちょっと警戒してもいい