お勉強 デイトラWeb制作

Gulpのインストールができない!エラーの原因と解決法

gulpインストールエラー原因と解決法

デイトラのWeb制作コース中級編 DAY19 の品質テストをする過程で画像圧縮のgulpをインストールしようとしたのだが、エラーでインストールできず。。
その原因と解決法をメモしておきます。

まずどういう手順でインストールしようとしたか

参考にしたサイトは以下のサイト!

もっと詳しく

一通りの設定を終え、npm installでgulpをインストールしようとしました。

gulpのインストールを実行しようとしたらエラーが発生

gulpインストールエラー

「gulp」という名前が怒られている?
既に「gulp」という名前が使われているからインストールできないような感じです。

思い当たることと言えばgulpインストール先のフォルダの名前を「gulp」にしてしまっていたこと。
なのでフォルダ名を変更して再度インストールを試してみました。

しかし同じエラーをくらってインストールできず...。
一体どこの「gulp」のことを言っているんだい?と思って調べていたら、先にインストールしていたpackage.jsonファイルに原因がありました。

package.jsonファイル内のnameも修正する必要があった

当初こちらのサイトを参考に進めていて、package.jsonファイルを先に作成していました。
そのためpackage.jsonファイルのname部分がフォルダ名と同じになっていて、gulpという名前のフォルダ名にしていた私は、エラーではじかれgulpをインストールできなかった、というわけです。

gulpエラーpackagejsonファイルnameの修正

name部分をを修正したフォルダ名と同じにし、再度gulpインストールをかけてあげると無事インストールの処理が進んでいきました!
めでたしめでたし!

-お勉強, デイトラWeb制作

© 2021 文系女子とプログラミング