クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > Gulpのインストールが5分で出来なかった話（苦戦中）

Gulpのインストールが5分で出来なかった話（苦戦中）

開発環境 gulp

メタ言語のコンパイル環境を作る！続きです。前回はコンパイル方法を検討しました。Gulpとnpm scriptsが候補となりましたが、まずはGulpから体験してみようぞホトトギス。それではいきましょう！*1

【目次】

※参考：前回記事
【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した - クモのようにコツコツと

※参考：Web開発環境についてのまとめ
qiita.com

Node.jsインストール確認

まず、Node.jsのインストールを確認。ターミナルを開いて下記のコマンドを打つ。

 node -v

インストールされていればバージョンナンバーが表示される。

表示されない方はNode.jsをインストール。こちらを参照。

※参考：初めてのNode.js：インストール確認、REPL、Hello worldまで - クモのようにコツコツと

Gulpインストールにはnpm（Node Package Manager）が必要だが、Node.jsがインストールされていればnpmも同梱されている。

黒い画面のコマンドがよくわからない方はこちら

※参考：初めてのPython（インストール〜Hello world）と初めての黒い画面 - クモのようにコツコツと

Gulpをインストールするフォルダを作成

次に、Gulpをインストールしたいフォルダを作成。今回は「gulp_test1」としてみた。

cdコマンドでそのフォルダに移動する。

cd Desktop
cd (gulp_test1があるフォルダ)
cd gulp_test1

ユーザー名の前がgulp_test1になってれば移動できている。

pacage.jsonを作る

次にpacage.jsonを作る。

npm init -y

このコマンド。

package.jsonは前回の記事でも触れたようにnpmの設定ファイル。

※参考：【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した - クモのようにコツコツと

Gulpをインストール

いよいよ！Gulpをインストールしようぞホトトギス！

Gulpのインストールには-gを使ったグローバルインストールという方法もあるが、あまり推奨されない模様。

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。現在ではそれは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

推奨されているのは下記のnpmコマンド。実行！

npm install -D gulp

しばらく処理中…

インストール終了！したのかな？

f:id:idr_zz:20191119061301j:plain

node_modulesフォルダの中にはまた膨大なフォルダが入っている。

直下にはpackage.json…ではなくpackage-lock.jsonというファイルがある。package.jsonは見当たらない？？

npmをアップデートができない？

Gulpが無事にインストールされるとバージョンナンバーが表示されるはずだが…

gulp -v

あれ？表示されない？

ターミナルにはこうある

New minor version of npm available! 6.12.0 → 6.13.0
Changelog: https://github.com/npm/cli/releases/tag/v6.13.0
 Run npm install -g npm to update!

npm install -g npmというコマンドでnpmのバージョンをあげてくれと。

よく見ると上の処理中の記述にも「Err」とエラー表記が出ている。

言われた通り上げてみる。

npm install -g npm

これでどうだ？

gulp -v

うむ、まだ表示されない。Gulpインストールは「5分でできる」という記事をよく見るが、5分では終わらなかったな…。

npmのキャッシュをクリアしてみる

この記事の事例と似ているようだ。

※参考：gulpが実行出来なくてハマった時に確認したこと - Qiita

やってみよう。キャッシュクリア！

npm cache clean

からのアップデート！

npm update -g npm

しかし、変わらない。。

そもそもnpmのバージョンは？

npm -v

結果は6.12.0。まだ上がっていない。npmがアップデートできない？

package-lock.jsonについて調べる

先ほど、フォルダ直下にpackage-lock.jsonが生成され、package.jsonは見当たらなかった。

package.jsonは買うものリスト

100円のりんごを買いたいと書かれている
package-lock.jsonは実際に買ってきた領収書

実際には120円のりんごを買いましたと書かれている

※参考：【Node.js】package.jsonとpackage-lock.jsonについて簡単にまとめる - Qiita

概念的にはこういうことらしい。package.jsonは予定でpackage-lock.jsonは結果、みたいな？

別の記事では

package-lock.jsonってあるんだけど

package.jsonを生成しなかった場合に自動生成されるjsonファイルのようです。

※参考：npmとpackage.jsonが良く分からなかったので独自目線で纏めた - Qiita

むむ？「生成しなかった場合」？package.jsonの生成がうまくできなかった場合という意味かな。

インストールしたGulpをいったん削除

いったん削除して仕切り直ししたい。

-g を付けてグローバルにインストールしたもの
npm uninstall パッケージ名 -gで削除でOK
プロジェクトにインストールしたもの
node_modules フォルダごと削除したら良いです。

※参考：JavaScript - npmでのローカルインストールを完全に削除する方法｜teratail

ローカルのパッケージにインストールしたものはフォルダごと削除で良いようだ。

いったん「gulp_test1」フォルダを削除する。

グルーバルインストールとは何か調べる

そもそもここからわかってない。調べる

グローバルインストールしたパッケージはpackage.jsonに記載されない。つまりグローバルインストールすることを前提にREADME.mdなどに注意事項を書く必要が出て来るため構築時に作業量が増える。またグローバルインストールのバージョンが管理外になるため同一の環境になる保証がない。開発時に必要なパッケージなどはnpm install --save-devで管理しておくことによりバージョンが統一できるし、npm installのみでインストール作業を終えることができる。

※参考：【npm】グローバルインストールは控えるべき

やはりあまり推奨されないようだ。他にもこちらの記事とか。

※参考：CLI 環境構築 グローバルインストールとローカルインストールの違いについて - Qiita

※参考：僕がnpm installに-gをつけないわけ - Qiita

今回はちゃんとローカルにインストールした。しかしnpmのバージョンアップをしてくれと言われた。

npmを最新版にしたいが、できない。ローカルではなくグローバルのnpmのバージョンをあげるか？

グローバルでnpmを上げてみる→エラー

グローバルは推奨されないとあるが、やってみるか。こちらを参考に。

※参考：npm自体のバージョンを上げる - Qiita

えいや！

npm install -g npm

処理中…終わったがまた「ERR」がいっぱいでてる。

npm -v

結果は6.12.0のまま。

キャッシュをsudoでクリアしてみる

エラーのコードにキャッシュが原因のことが多いため、キャッシュクリアをするといいとあるが、やってみてる

さっきもやったことだが今度はsudoさん付きにて。

sudo npm cache clean

※参考：【node.js】npmアップデート時のエラーの対処法 | cupOF Interests

上記のキャッシュクリア中にもエラーになった。

npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

「npm ERR！キャッシュ全体を削除したい場合は、-forceを指定してこのコマンドを再実行してください。」

やってみるか

sudo npm cache clean --force

やった。特になにも起こらず。クリアできたのかな？

アクセス権限がない？

npmを再度グローバルでインストールしてみる。さあどうだ？

npm install -g npm

ダメか。またERRになった。。

しかし、今度はキャッシュ云々の記述はなくなって、アクセスを拒否されました、という内容。

アクセス権限を変更（できてない？）

これかな。

※参考：npm installでError:EACCESがでたら - Qiita

「777」の意味

アクセス権限をすべての利用者がすべての権限を持つ

※参考：パーミッションなどを設定する！chmodコマンドの詳細まとめ【Linuxコマンド集】

やってみる。

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

変わったかな？

npm install -g npm

いや、また同じERR。うーん、いったん保留しよう。

Node.jsのバージョンを上げる

Node.jsが古いのが原因じゃないかと思った。

公式サイトを見ると。

※参考：Node.js

最新版は「13.1.0」だ。

PCの中のNodeは？

node -v

「v13.0.1」。ちょっと古いか？

上げてみるか。こちらを参考に。

※参考：Node.jsのVersionを気軽にアップデートしよう(n)。ついでにnpmも | YongJin Kim's Blog

「n」をインストール

npm install -g n

「n」を実行

n

選択肢が表示される…

  ο node/13.0.1
Use up/down arrow keys to select a version, return key to install, d to delete, q to quit

おや？表示されない。「13.0.1」しかない。。

「n」ってなんの略？と思ったらNode.jsのバージョン管理ツールの正式名称なのねw

※参考：nodeのバージョンをnで管理する - Qiita

今度は普通にNode.jsの公式サイトからダウンロード、インストールしてみる。

バージョン、いくつになった？

node -v

おお、「v13.1.0」になった！

npmのデフォルトディレクトリの権限を変更したら更新できた！

よし、それではアップデート

npm update -g npm

あー、変わらない。こちらの記事が近そう

※参考：npmでpermission deniedになった時の対処法[mac] - Qiita

npmディレクトリのパスを確認する

npm config get prefix

うむ、/usr/localと表示される。

npmディレクトリのオーナーを自分のアカウントに変更

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

再度、アップデート！

npm update -g npm

お、エラーにならない？npmのバージョンは？

npm -v

おお、「6.13.1」になった！！

Gulpインストールリベンジ（フォルダ空っぽ。。）

リベンジしてみる。

「gulp_test1」フォルダを作って移動。

cd Desktop
cd (gulp_test1があるフォルダ)
cd gulp_test1

Gulpをインストール！

npm install -D gulp

処理中…ドキドキ

+ gulp@4.0.2
added 373 packages from 238 contributors and audited 6575 packages in 16.816s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

しかし、フォルダの中身は空っぽ…

f:id:idr_zz:20191120070637j:plain

npm WARN saveError ENOENT: no such file or directory, open '/Users/（ユーザー名）/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/（ユーザー名）/package.json'

「package.jsonというファイルがありません」といった注意は出た。

Gulpのバージョンナンバーも

gulp -v

やはりでない。

-bash: gulp: command not found

うーむ…

やったことまとめ

あらためてやったことをまとめ

  • Node.jsインストール確認
  • Gulpをインストールするフォルダを作成
  • pacage.jsonを作る
  • Gulpをインストール
  • npmをアップデートができない？
  • npmのキャッシュをクリアしてみる
  • package-lock.jsonについて調べる
  • インストールしたGulpをいったん削除
  • グルーバルインストールとは何か調べる
  • グローバルでnpmを上げてみる→エラー
  • キャッシュをsndoでクリアしてみる
  • アクセス権限がない？
  • アクセス権限を変更（できてない？）
  • Node.jsのバージョンを上げる
  • npmのデフォルトディレクトリの権限を変更したら更新できた！
  • Gulpインストールリベンジ（フォルダ空っぽ。。）

Node.jsを最新に上げて、npmもグローバルでは最新になった。アクセス権限もたぶん変わっていると思う。しかしまだうまくいかない。

解決に繋がりそうな下記の記事を読んでいる間に今回は時間切れ…

※参考：Gulpインストール時にエラーが出た時の解決策まとめ | Web-Guided - web業界で働く方を少しだけ手助けするメディア

最後

ということで、まだGulpのインストールにいたっていなです。。ターミナル、コマンド、PCの権限などの前提知識が足りないため、PCの中がどんな状態になっているのか理解しきれていない。もっと抜本的なことをやって方がいいのかもしれないですね。また進捗をレポートします…

※参考：続編です。gulpインストールでけた！
www.i-ryo.com

※参考：Web開発環境についてのまとめ
qiita.com

*1:と、ハイテンションで始めたが今回は悪戦苦闘な展開になります…