Gulpインストール時にエラーが出た時の解決策まとめ

Gulpはとても便利なツールですが、制作現場の環境やPCによってインストールや使用時にエラーが出てしまうことが多々あります。

そのような時のために、Gulpをインストールや使用する際にエラーが出た時の解決策をまとめました。

最初に確認したいこと

npm、gulp、プラグイン各種がインストールされているかを確認する。下記のコマンドを実行して、npmなどのバージョンが表示されたら、ちゃんとインストールされています。

 

・npmがインストールされているかどうか

npm -v

 

・gulpがインストールされているかどうか（グローバルインストールの場合）

gulp -v

 

・gulpがインストールされているかどうか（ローカルインストールの場合）

npx gulp -v

 

・プラグイン各種がインストールされているかどうか

npm ls --depth=0

上記コマンドで、インストールされているプラグインの一覧が表示されます。

エラーの種類と解決策

最初に試したいこと

sudoを付けて再びコマンドを実行をする。

例えば、npm installを実行してエラーが出た場合はsudo npm installのようにsudoを頭に付けて再び実行をしてみてください。

sudoを付けることで現在とは違う管理権限でコマンドを実行することが出来ます。これで権限周りのエラーが解決する場合があります。

さらに、次のセクションでより詳しく権限周りのエラーが出た場合の解決策を紹介していきます。

権限周りのエラー

エラーメッセージの中に、permissionの文字列があった場合、権限関係のエラーを疑って下さい。

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/aproba'

上記のようなメッセージは、インストール時にnpm側でディレクトリを作成しようとした際に、現在の状態だと権限がなくディレクトリが作成出来ないという内容になります。

 

解決策：ディレクトリの権限を変更してアクセス可能状態にする

 

エラーが出ているディレクトリの権限をコマンドで変更してあげます。

上記で挙げたエラーメッセージの場合、/usr/local/lib/と/usr/local/lib/node_modules/npm/node_modules/のディレクトリにコマンドで権限を変更してあげます。

下記コマンドで権限を変更することが出来ます。

sudo chmod 777 /usr/local/lib

sudo chmod 777 /usr/local/lib/node_modules/npm/node_modules/

権限を変更して、再度npmコマンドを実行してもエラーが出る場合は、自分でエラーが出たディレクトリを作成（上記で挙げたエラーメッセージの場合node_modules/を作成）して、上記コマンドで権限を与えてあげます。

sassのsrcの指定が原因でのエラー

Message: node_modules/node-sass/test/fixtures/depth-first/_vars.scss
Error: Undefined variable: "$import-counter".

上記のメッセージは、1行目がエラーが出たファイルのパスで、2行目で「$import-counterの変数が定義されていないのに値として呼び出されています」という内容です。

しかし、自分で作成したsassファイルで$import-counterという変数は呼び出していません。

メッセージのパスをよく見てみるとnode_modules/と書かれています。node_modules/は設定ファイルなどをまとめたディレクトリで、この中のsassファイルもコンパイルの対象になっているみたいです。

この時のsassタスクのsrcは以下の通りです。

gulp.src('./**/*.scss')

全てのsassファイルを対象にしていたため、node_modules/ディレクトリのsassファイルもコンパイル対象にされてしまい、そのせいでエラーが出てしまいます。なので、以下のようにディレクトリをしっかりと指定してあげればエラーは解決します。

gulp.src('./src/**/*.scss')

プラグイン未定義でのエラー

ReferenceError: sass is not defined at Gulp.

上記メッセージは、プラグインを定義していないことが原因でのエラーになります。この場合、gulp-sassのプラグインを定義していない場合のエラーメッセージです。

なので、gulpfile.jsの上部で以下のようにプラグインの定義をしてあげれば解決します。

const sass = require('gulp-sass')

package.jsonのnameが原因でのエラー

既存のpackage.jsonがあり、npm installでプラグインもろともインストールする際に、jsonファイルのnameの値が「gulp」のみだとエラーが出てしまいます。

値が「gulp」のみだとエラーが出てしまうので、「gulp_pjt」のように「gulp」に他の文字列を足してあげればエラーは出なくなります。

まとめ

基本的にgulpでエラー出る原因は、以下2つのどちらかだと思います。

• 権限関係
• 単純な打ち間違い

権限関係のエラーの場合は、どうやったら権限を与えられるか、どこのディレクトリでエラーが出ているかをしっかりと確認すれば解決することが出来ます。

単純な打ち間違いの場合は、エラーメッセージの内容をよく見て、作業用のファイルでエラーが出ているのか、それともgulpfile.jsでエラーが出ているのかを確認すれば簡単に解決出来ます。

gulpを触り始めたばかりの時は、エラーの原因自体が何なのかすら分からないことも多々あると思います。しかし、エラーが出た場合は何が原因なのかということをエラーメッセージからしっかり読み取ることが重要です。