今までに私が遭遇したgulpエラーの解説と解決方法まとめ


今回は私がgulpなどを触っていくなかで、発生したgulpエラーとその解決方法についてまとめました。
同じようなエラーに遭遇された方で、エラー解消の一助になれば幸いです。

参考にしたサイトのURLも一緒に載せておきます。

それでは早速いきましょう。

【目次】

  • 1 Error: Cannot find module 'gulp-sass'
  • 2 Error in plugin "gulp-imagemin"
  • 3 Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)
  • 4 Error in plugin "gulp-imagemin"
  • 5 SyntaxError: Identifier '<変数名>' has already been declared
  • 6 ERR! missing script: start
  • 7 Error: Cannot find module 'gulp-imagemin'

1. Error: Cannot find module 'gulp-sass'

Error: Cannot find module 'gulp-sass'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/flyscoot.com/gulpfile.js:2:12)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

これは、私が始めてnpm run startをターミナルで叩いて発生したエラーです。

gulp-sassがモジュール内に入っていないことが原因で起こるエラーで
この場合、npm install --save-dev gulpnpm install --save-dev gulp-sassをターミナルに叩いて
gulpとgulp-sassをローカルインストールすれば、解決することができます。

--save-devとはローカルインストールするためのコマンドです。
 npm install -gがグローバルインストールのコマンドで、-gを付けることでグローバルインストールすることになります。

■参考にしたサイト: stack overflow Error: Cannot find module 'gulp-sass'

2.Error in plugin "gulp-imagemin"

[21:33:01] Using gulpfile ~\Desktop\npm-minify-img\gulpfile.js
[21:33:01] Starting 'default'...
[21:33:01] 'default' errored after 217 ms
[21:33:01] Error in plugin "gulp-imagemin"

このError in plugin "gulp-imagemin" は呼び出しているディレクトリ内に、pngquantが無いという意味になります。
pngquantは圧縮による画質の劣化が無いPNGを簡単に圧縮処理してくれるコマンドです。

npm install mozjpeg(JPEG、PNG、GIF、SVGなどの画像の画質を落とすことなく
サイズを圧縮する事ができるエンコーダー)と打ち込みmozjpegをインストールする事でエラーが解消しました。
  

■ 参考にしたサイト:stack overflow Error:Error in plugin "gulp-imagemin"

3.Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)

Error: Missing binding /path/to/project/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)

Found bindings for the following environments:
  - OS X 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports (/path/to/project/node_modules/node-sass/lib/binding.js:15:13)
    at Object.<anonymous> (/path/to/project/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

使用しているモジュールのバージョンが、自身の開発環境でサポートされていない場合に発生します。
私はnode.sassを最新バージョンにダウンロードしていた為、上記の様なエラーメッセージが起こりました。

解決方法としては、node.sassのバージョンをv15.6.0からv14.15.4にダウングレードと
npm rebuild node-sassのコマンドを叩く事で解決しました。

■参考サイト:stack overflow Error: Node Sass does not yet support your current environment]

4.Error in plugin "gulp-imagemin"

Error in plugin "gulp-imagemin"

これは、gulp-imageminが入っていない場合に起きるエラーですので、npm install mozjpegのコマンドを打ち込みエラーが解消します。

5.SyntaxError: Identifier '<変数名>' has already been declared

このエラーの内容は、変数が二重に宣言されているという意味です。
私の場合SyntaxError: Identifier 'imageminPngquant' has already been declaredと出ており、var imageminPngquant = require('imagemin-pngquant');
が二重で指定されていた為、先頭行の変数を削除する事でエラーが解消しました。

私の場合、imageminPngquantが二重で指定されていたので
「var imageminPngquant = require('imagemin-pngquant');」を削除することで、エラーが解消しました。

 

6.ERR! missing script: start

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/saigowtham/.npm/_logs/2020-07-27T05_56_13_752Z-debug.log

これは、package.jsonのscripts.startが無いことが原因で起こるエラーです。
package.json内に下記コマンドを打つことで解消します。

"scripts": {
   "start": "実行するプログラム.js"
},

7.Error: Cannot find module 'gulp-imagemin'

Error: Cannot find module 'gulp-imagemin'

このエラーの内容は、呼び出しているモジュール内にpngquant-binがみつからないと言われています。
その為、 npm install gulp-imageminを実行することでエラーが解消します。

私が遭遇したエラーは以上となります。
gulpは初心者の為、もし間違いがあればご指摘頂けると助かります。