今回、コーディング作業のためにgulpを導入したので、その工程を①導入編、②設定編に分けてご紹介します。
つい最近まで私は、gulpというものの存在すら知らなかったわけなのですけれども
一緒に仕事に携わったプログラマーの方から、「gulp環境入れときましょうか？」と提案をいただき（もちろんその時はガルプ？モンスターの名前かな？というレベルでした）
そこから必要に駆られて勉強をすることになりました。
1. そもそもgulpとは何か？
gulp.js公式サイトはこちら
https://gulpjs.com
コーディングをする際に、色々と不便に思ったことはありませんか？例えば、
- sassの環境を作るために毎回いちいちコマンドを打つのが面倒
- 画像が1つ1つ割と重くてページの読み込みが遅くなってしまう…
- cssのベンダープレフィックスとかいちいちつけてられない…
- ローカルサーバーすぐ起動したいな…
上記のようなことを一発で解決してくれるのがgulpです。
私は正直サーバーサイドが全般的に苦手です。
バックエンドなんてさっぱりな私でも導入したらとても便利に感じています。
Gulpの環境さえ作ってしまえば、あとはコーディングし始めたい時に、「npx gulp」ってターミナルで打つだけ！
とてもとても便利です。
今回と次の「設定編」を通して、私が今使用しているgulp環境を公開します。
2. gulpを導入する！(Macの場合)
2-1. gulpを使うのは、まずnode.jsが必要
gulpはNode.jsのパッケージなので、まずはNode.jsを自分のPCにインストールする必要があります。
さらにいうと、Node.jsを管理するためにnodebrewが必要で、nodebrewをインストールするためにhomebrewを使います。（何がなんやら）
最初上記の工程を進めた時、自分が何をしているのかさっぱりわからなくなりました。そこで今自分なりに理解した内容を図にしてみます。
この工程は必須ではありません。homebrewを使ってnode.jsをインストールすることもできます。ただ、nodebrewを使うとバージョン管理ができるという点が優れています。
並行していくつかの案件をする際に、もしかしたら、今のnode.jsのバージョンでは作業の自動化がうまくいかないという可能性も出てくるかもしれません。その際に、この案件はこのバージョンで、次はこのバージョンで、というふうにすぐ切り替えが可能です。
Node.jsとは何か、Node.jsのインストールの手順については下記のサイトの記事がとてもわかりやすく参考になりました。
こちらの記事の通りインストールしていけば問題ないかなと思います。（macの場合）
ちなみに、私が行った導入の手順はこちら。macなのでターミナルでの作業です。
①homebrewでnodebrewをインストール
brew install nodebrew②nodebrewがインストールされたか確認し、セットアップ
nodebrew -lsバージョンが表示されればうまくインストールされています。ここでもし2つ以上のバージョンがあったら、以前インストールしてる可能性があります。使用したい方のバージョンを指定して、「これを使います」と指示します。
nodebrew use v16.7.0(ここは希望のバージョン）セットアップをします
nodebrew setupパスを通します。
export PATH=$HOME/.nodebrew/current/bin:$PATHこれでnodebrewのインストール完了！
③node.jsの安定版をインストール
nodebrew install-binary stableインストールできたかチェック
node -vこれで無事希望のバージョンが出てきたらOKです。
2-2. package.jsonの作成
次にpackage.jsonを作成します。
私の場合、Sitesというフォルダに全てのコーディング案件を入れていたので、
ターミナルでそのフォルダまで移動した上で以下のコマンドを打ちました。
npm init -y2-3. gulpをインストール
ここでようやくgulpをインストールします。
npm install -D gulpインストール無事できたか確認します。
npx gulp -vこれでバージョンが出てきたら無事インストールできています。
2-4, gulpを起動してみる
gulpの中身については設定編でご紹介しますが、一通り自分なりのgulpfile.jsが作成できたら早速gulpを起動してみます。
npx gulpそうすると私の場合エラーが出てしまいました。
上記の中でエラーの具体的な内容は下記になります。
Instead change the require of index.js in gulpfile.js to a dynamic import() which is available in all CommonJS modules.
理解できない単語ばかりですが、どうやらnode_modulesのgulp-imageminでエラーが起きているということがわかります。
そこで一旦gulp-imageminをアンインストールしました。node_modulesの中のプラグインを削除するコマンドは
npm rm gulp-imagemin(削除したいディレクトリ)です。また色々ネットで調べてみたところ、どうやらimagemin自体をダウングレードする必要があるのだそう。
前のバージョンを指定してimageminをインストールしなおします。
npm install gulp-imagemin@v7.1.0上記の手順で無事gulpが動きました。
3. まとめ
Nodeやgulpのバージョンは日々アップデートされていくので、その都度エラーが変わる可能性があります。
ただ、そんな時もエラー分の難しい英語をとりあえずそのままコピペして検索してみると
すでに同じエラーが出たという方の対処法が発見できる場合が多いです。
次回は実際コーディングするにあたって使用しているgulpの内容を紹介します。
