見出し画像

初めてのGulp導入！【まとめ】 インストール手順から数々のエラー解消まで

みずなみ


先日、初めてGulp（ガルプ）を導入しました。

参照した手順サイトや実行したインストール方法、どんなエラーが出てどうやって解消したかなど、Gulpに関する経験を備忘録として投稿します。

【こんな悩みを持つ方へ】
・Gulpってたまに聞くけど、そもそも何？
・Gulpを導入したいけど初めてなのでやり方がいまいちわからない
・インストールしたいのにエラーばかり出て困っている

こんな悩みを解決できる記事を書きました。

ぜひ初めてSassの開発環境を整える上で、Gulp導入にチャレンジしてほしい！という思いを込めています。

なぜなら、プログラミング初学者の私がGulpの便利さと効率の良さを今なお体感しているからです。すごい賢いこの子･･･！

1.Gulpって何？


そもそもGulpってなあに？という方、大丈夫です。私も作業を始めるまでどんなものなのか分かりませんでした。
唯一思いついたのは、釣りで使うワーム（疑似餌）のメーカー（「Gulp！」ってやつ）･･･笑

色々調べてみた結果、Gulpはざっくりいうと
『いろんな面倒くさい作業を自動でこなしてくれるお助けプログラム』
です。

" ウェブ制作におけるさまざまな処理を「タスク」という単位で扱い、このタスクを自動化するツールのことを「タスクランナー」と呼びます。一般的にウェブ制作の現場では、Sassサスを編集すればコンパイルを実行し、画像を編集すれば画像を圧縮するというように多くの手間がかかります。"

" タスクランナーを使うとこのようなウェブ制作での煩雑な処理がすべて自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。"

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

つまり

・Sass（サス）をCSSにコンパイル（変換）する
・使用している画像を圧縮する
・分けたSassファイルを一つのstyleファイルにまとめて@importする記述（globパターン）を可能にしてくれる
・ベンダープレフィックス（各ブラウザの表示に必要な接頭辞）をつける
・CSSのプロパティを並べ替える（アルファベット順、重要な順など）
・命令されたタスクの処理が完了したらデスクトップに通知する

など、これらのタスクを自動で処理してくれるそれぞれの機能（プラグイン）をあらかじめ設定しておけば、あとはまとめて実行するだけで全自動でやってくれます。


すごくないですか･･･？
私は導入して初めてSassを書いて試した時、効率が格段に上がるのを体感し感動しました。


2.Gulpを実際に導入したときの手順

このGulpを導入するまで、色んなサイトで手順を参照しました。だいたい同じような手順だったので、私は以下のサイトを見ながら実際に作業を進めました。

★5分で終わる！WindowsでGulpを使えるようになるまでの手順
・Windowsにgulpを導入してsassをコンパイルするまでの手順
・絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順
・Gulpを初めて使ってみた！導入からタスクお試し（gulp-cssmin, browser-sync）までの手順
★Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】

いろいろ見すぎちゃう？と思ったそこのあなた。そうなんです、ネット上には色んな手順サイトがありますね！

個人的にわかりやすいと思うサイトに★マークをつけました。
もちろん他のサイトも情報ソースとして参考にさせていただきました。

2020.1.12　追加情報
Sass導入の手引きとして有名な書籍「Web制作者のためのSassの教科書」
に記載されている環境設定には、古い情報がいくつかあるようです。
環境や状況によりますが、エラーが起きたりタスク設定などをする際にはネットで検索すると良いという情報をいただきました。


導入作業を始める前に、テストするのに使うファイルの事前準備をしておくのがオススメです。以下にざっくりとファイル例を載せておくので、ご参考程度に。

①テストできる程度のコードをHTML、Sass共に書いておきます。
まずは「index.html」。

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Document</title>

       <link rel="stylesheet" href="css/style.css">

   </head>

   <body>
       <div class="container">
           <h1>Hello World!</h1>
           <p>さあ始めましょう！</p>
       </div>
   </body>

書いたら、プロジェクトフォルダ直下に保存します。

次は「style.scss」。

.container {
   h1 {
       color: red;
   }

   p {
       color: green;
       background-color: yellow;
   }
}

プロジェクトフォルダ内に「sass」フォルダを作り、その中に保存します。

style.scssはGulp実行後、style.cssとして変換されcssフォルダに入ります。それがindex.htmlをきちんと装飾してくれるように、index.htmlの<head>タグ内でstyle.cssを読み込んでおきます。


次はいよいよ、 5分で終わる！WindowsでGulpを使えるようになるまでの手順 を見ながら導入作業をしてみましょう。
せっかく詳しい手順サイトがあるので、そちらを活用しましょう！
この記事では導入中に起きたエラーの解消方法を重点的に紹介します。

導入作業が完了したら、コマンドプロンプトで「npx gulp」と入力しEnterを押せばGulpが実行されます。

PC環境によりますが、うまくいく人はすんなり導入できます。
無事導入できた方、おめでとうございます！さっそく効率化された開発環境で感動体験をしましょう！

エラーが出て止まってしまった方。落ち込まないでください。
出来ることはまだまだありますよ！


3.エラーを解消する前に

まずはGulp、Node.is、npm、Gulpで指示するために使う各種プラグインなど、どこまできちんとインストールされているかを調べる必要があります。

以下のサイトを参考にしながら確認してみましょう。

Gulpインストール時にエラーが出た時の解決策まとめ 
https://web-guided.com/260/

それぞれのバージョンを表示させるコマンドを入力し、Enterで実行させて確かめます。
上記サイトや以下に挙げるサイトでも数種類のエラーと解消方法が載っているので、もし該当のエラーがあれば参考にしてみてください。

【超まとめ】今まで遭遇したgulpやSassエラーと対処法を片っ端からまとめてみた


4.私がGulp導入中・導入後に実際に経験した数々のエラーと解消までの道のり

先ほどご紹介したGulpインストール時にエラーが出た時の解決策まとめ に載っていないエラーもいくつか経験したので、ずらっとご紹介します。
（ここでお伝えするエラー文は、あくまで私が経験した結果です）

解消の一助になれば幸いです。


エラー①

'gulp' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

Node.jsをインストールした後、GulpをインストールしたつもりでコマンドプロンプトでGulp実行（npx gulp）すると起きたエラーです。

【解決方法】

コマンドプロンプトを一旦閉じて管理者として開き直し、グローバルインストールするコマンドでGulpをインストールし直してみました。

npm install -g gulp

インストールが終わって、Gulpのバージョンを確認するコマンドを実行してみると、うまくインストールできていました！

C:\Users\sjnk137165\Desktop\work>gulp -v
CLI version: 2.2.0
Local version: 4.0.2

Gulpをローカルでインストールするか、グローバルでインストールするかは開発環境や周りとの連携状態によってルールを決めておくと良いようです。

ローカル？グローバル？それって何？という方は、以下のサイトがわかりやすいです。

CLI 環境構築 グローバルインストールとローカルインストールの違いについて

赤文字のERR！が出た場合はエラーです。
黄文字のWARN！が出た場合は、"インストールは一応成功したけど紐づいてなかったりこれができてません"ということなのだと私は理解しました。


エラー②

module.js:338
   throw err;
         ^
Error: Cannot find module gulp-sass-glob
   at Function.Module._resolveFilename (module.js:336:15)
   at Function.Module._load (module.js:278:25)
   at Module.require (module.js:365:17)
   at require (module.js:384:17)
   at Module._compile (module.js:460:26)
   at Object.Module._extensions..js (module.js:478:10)
   at Module.load (module.js:355:32)
   at Function.Module._load (module.js:310:12)
   at Function.Module.runMain (module.js:501:10)

Node.jsもGulpもインストールし終わり、タスクをカスタマイズしたくて「gulpfile」のファイルの中身をいじって、いざGulp実行したときに出たエラーです。

原因は、
・コマンドプロンプトでインストールしたモジュール（プラグイン）
・「gulpfile」内のモジュール（指示したいタスク）
この2点が合致していなかったことでした。

経緯としてはこんな感じ。
Gulpで出来ることをたくさん調べて色んなプラグインがあることがわかったものの、自分にどれか必要なのかがよくわかりませんでした。

そこで、はにわまんさんのブログ「HPcode（えいちぴーこーど）」の以下の記事を参考にしながら「gulpfile」のファイルをエディタで編集しました。

Sassから完璧なCSSファイルを出力するために通したいGulpのタスク【WordPress編】

そしてページ下部に載っていた「package.json」をコピペして貼り付けました（「package.json」もエディタで編集できます！）。

次に、コマンドプロンプトでプロジェクトフォルダに移動した状態で以下のコマンドを入力し

npm install

素直に実行すれば良いはずでした･･･！

でも私は何を血迷ったのか、他にも色々なサイトを調べ、「package.json」の中身をコピペ＆トリミングしたり編集しては「npx gulp」で実行→エラーを繰り返してました。笑

「gulpfile」と「package.json」の中身を共通させ、「npm install」することで、必要なモジュールを一括インストールすることが大切です！

ちなみにこの後原因に気づき、足りないモジュールをインストールするコマンドを見つけて実行し、無事Gulpを使うことができました。

node.jsで足りないmoduleをインストールするコマンドをインストールしてみる


エラー③

ReferenceError: primordials is not defined

これも、プラグインのインストールが終わり「npx gulp」でGulpを実行した際に出たエラーです。

Node.jsをダウングレードし改めてGulp実行すると、

そこで、エラー文をGoogle翻訳で読み解いてみました。


いろんなことをしてますが、結果的にGulpとNode.jsのバージョンを調整することで、エラー③は出なくなりました。


これ以外にも様々なエラーに遭遇しましたが、

結論　　「全体図と必要条件を把握できていなかった」

このことが今回のエラー祭りの最も大きな原因でした。

今回は私自身の備忘録としてnoteを書いていますが、これから私がエンジニアとして成長していく中でGulpやNode.jsについて正確に把握し使いこなせるようになった日には、初心を思い出し初学者のためのSass導入Tipsをリリースしたいと思っています。


5.今回のまとめ

物事（今回はエラーの解消方法）を調べるとき、上手な検索のしかたが身についていると答えに辿りつくスピードも速いですよね。

エラーを解消するために必要なのは

・今自分がやろうとしたこと（コマンドに入力した指示）はどんなことか
・どこ（アプリ、フォルダなど）から、どんなエラーが返されたのか
・どこまで処理できているのか

以上3点を把握することだと個人的に思っています。

実際にいろんなエラーを経験した先人の方が、たくさんの失敗談や解決方法をネットワーク上で共有してくれています。

それらの中でも自分の欲しい情報に辿りつくには、「その答えが載っているサイト内に書かれていそうな "単語" や "短文"」を検索ワードにして探すとうまく見つけられることが多いです。

最も良い方法は「"定型文らしきエラーの英文"　gulp　エラー」のように、全体に関する単語やヒントとなる定型文でググることです。

Google翻訳でエラー文を直接翻訳する方法もあります。たまに意味の繋がらない文になることもありますが、何となく把握できます。
しかし翻訳した文や単語で検索するよりも、エラー文そのままを用いて検索した方がヒット率が高いです！

上記で紹介したエラー以外の、新しいエラーが出た場合にはぜひ実践してみてください。


以上、初めてのGulp導入についてインストール手順から数々のエラー解消までの道のりをまとめてご紹介しました。


初めてのnote、拙い文章であるにもかかわらず最後まで読んでいただき、ありがとうございました！

この記事が気に入ったらサポートをしてみませんか？