今回は私が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 gulpとnpm 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は初心者の為、もし間違いがあればご指摘頂けると助かります。