メタ言語のコンパイル環境を作る！続きです。前回、Gulpのインストールを試みて、うまくいかず苦戦中です。インストールに至るまでの実録！後編ですw
【目次】
- 焦らず、実行結果を読んでみるところから
- WARNとは何か→警告状態
- 実行結果をGoogle翻訳
- Gulpのインストールエラーについての検証作業
- npm lsのエラーを調べる
- ローカルフォルダにもpackage.jsonファイルがない！
- 2回目のGulpインストール時にpackage.jsonを作り忘れていた！
- npm initでpackage.jsonを作る！
- Gulpのインストール（リベンジ！）
- +gulp以下のメッセージの比較
- Package.jsonを見てみる
- 最後に
※参考：前回記事
Gulpのインストールが5分で出来なかった話（苦戦中） - クモのようにコツコツと
※参考：Web開発環境についてのまとめ
qiita.com
焦らず、実行結果を読んでみるところから
Gulpインストールのコマンド
npm install -D gulp
そのあとに出た実行結果
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' npm WARN （ユーザー名） No description npm WARN （ユーザー名） No repository field. npm WARN （ユーザー名） No README data npm WARN （ユーザー名） No license field. + gulp@4.0.2 updated 1 package and audited 21528 packages in 2.481s 2 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
ちゃんと読んでみよう（昨日は時間がなくて斜め読みしてた）。
WARNとは何か→警告状態
まずWARNとはなにか。（ワーンと泣きたい気持ちではあるw）
単語の意味は「警告する」。Warningとかよく動画冒頭のコピー禁止の注意で見る単語。
実行結果の問題の度合いを表記について調べたがそのものズバリな場所にたどり着けない。loggerという自分でログを記録するコマンドの解説が多かった。
priority は、次のリストに示すいずれかの値でなければなりません (高い順に示します)。
- emerg または panic - システムが使用不能
- alert - 即時の処置が必要
- crit - 重大な状態
- err または error - エラー状態
- warn または warning - 警告状態
- notice - 通常ですが有意状態
- info - 通知
- debug - デバッグ・レベルのメッセージ
WARNはエラー状態ほどいかないが警告状態。
実行結果をGoogle翻訳
実行結果をGoogle翻訳してみる。
npm WARN saveError ENOENT：そのようなファイルまたはディレクトリがありません。 '/ Users /（ユーザー名）/package.json'を開きます npm WARN enoent ENOENT：そのようなファイルまたはディレクトリはありません。「/ Users /（ユーザー名）/package.json」を開きます npm WARN （ユーザー名）説明なし npm WARN （ユーザー名）リポジトリフィールドはありません。 npm WARN （ユーザー名） READMEデータなし npm WARN （ユーザー名）ライセンスフィールドはありません。 + gulp@4.0.2 2.481で1個のパッケージを更新し、21528個のパッケージを監査しました 2つのパッケージが資金を探しています 詳細については、「npm Fund」を実行します 0個の脆弱性が見つかりました
ユーザー名フォルダ直下にpackage.jsonがないよと。確かにない。package-lock.jsonならある。ローカルインストールなのにグローバルな場所を見にいくのだろうか？
説明、リポジトリフィールド、README、ライセンスフィールドもないよと。うーむ、わからん。。
そのあとのgulpインストール部分は「インストールできない」的な表記は見当たらないんだがなー。
Gulpのインストールエラーについての検証作業
こちらの記事に従って検証してみる。
※参考：Gulpインストール時にエラーが出た時の解決策まとめ | Web-Guided - web業界で働く方を少しだけ手助けするメディア
・npmがインストールされているかどうか
npm -v
されている。
6.13.1
・gulpがインストールされているかどうか（ローカルインストールの場合）
npx gulp -v
されている
CLI version: 2.2.0 Local version: 4.0.2
・プラグイン各種がインストールされているかどうか
npm ls --depth=0
されている
/Users/（ユーザー名） ├── ejs-cli@2.1.1 └── gulp@4.0.2
が、その下にエラーメッセージがいっぱい！
npm ERR! extraneous: is-descriptor@1.0.2 /Users/（ユーザ名）/node_modules/define-property/node_modules/is-descriptor
などなど
npm lsのエラーを調べる
こちらの記事によると
mysqlパッケージを追加したところ、npm lsでエラーが出た。
$ npm ls npm ERR! extraneous: mysql@2.12.0 /vagrant/app/node_modules/mysql
うむ、似たような表記だ。
対応方法
package.jsonファイルに記述を追加。
いやいや、そもそもpackage.jsonファイル自体がないのだが。。
やはりpackage.jsonファイルがないといろいろ不都合が起こるのだろうか。
前回も書いたがpackage-lock.jsonはpackage.json作成に失敗したときに作成されるファイルだったよな。どうしたらいいのかな。
ローカルフォルダにもpackage.jsonファイルがない！
このあともいろいろ調べてたらteratarmのこの質問にたどり着いた！
※参考：JavaScript - "npm install"実行時にエラーが出ます｜teratail
npm WARN enoent ENOENT: no such file or directory, open '/Users/userName/vagrant/centos-65/study/package.json' npm WARN study No description npm WARN study No repository field. npm WARN study No README data npm WARN study No license field.
この人の実行結果、自分とほぼ同じだ！
「package.jsonがねぇ、説明がねぇ、リポジトリフィールドもREADMEもライセンスフィールドもねぇ」（IKUZO状態）
これに対する回答
今いるディレクトリにnode_modulesディレクトリが作られ、インストールしたパッケージが突っ込まれます。
JavaScriptファイル内でrequire('xxx');を行った場合。
そのファイルが居るディレクトリにnode_modules/xxxというパッケージはあるか？あれば読み込む。
無ければ一つ上の階層のnode_modules/xxxはあるか？無ければ…という風に上の階層に遡っていきます。
本当に無ければグローバルインストールしたパッケージを探します。
んん？「パッケージはあるか？」ない→「なければ上の階層にあるか？」ない→「なければ…」と遡っていき最終的にグローバルにパッケージを探しにいくらしい。
待てよ？今回やりたいのはローカルインストールなのだから、わざわざグローバルのpackage.jsonを見に行く必要はないわけだ。
よし、ではローカルフォルダを見にIKUZO。
ってそうそう！ないんだよね、空っぽ。本来はここにpackage.jsonがあるべきなんだ。でもGulpインストール時には作られなかったなー。
2回目のGulpインストール時にpackage.jsonを作り忘れていた！
最初に参考にしていた記事を読み直してみる。
※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA
「絶対につまずかない」はずが、どこにつまずいたのか。
３. package.jsonファイルの作成
コレだコレだコレだコレ！！！！してないぢゃん！自分！！
いやいや、1回目はしたんです。さらっと。意味も深く考えず。
で、Nodeやらnpmやらのバージョンが古いということでpackge.jsonは作られずにpackage-lock.jsonだけが作られてた。そうだ、そうだった。
そんでもっていったんフォルダごと削除して、Nodeとnpmのバージョンをあげた。
そのあと！Gulpを再インストールするとき！この時にしていない、package.jsonの作成。
npm initでpackage.jsonを作る！
もう一回、package.jsonの作成をやってみる。
まず該当フォルダに移動。ちなみにこちらの動画版を見たところ、フォルダへの移動はcdコマンドのあとにフォルダ名を打たなくてもファインダー上のフォルダをターミナルにドラッグするだけで行けるようだ。知らなかった！
cd （フォルダドラッグで移動）
package.jsonファイルを作成する！コマンドはコレ。
npm init -y
これだよなー。initってpackage.jsonのパの字もないので印象が薄く、見落としてしまった。
npm initとは、npmをインストールした後最初に使用する初期化処理を意味するコマンドです。
initとは、initializeの省略で、初期化を意味します。初期化処理を行うことで、package.jsonが生成されます。
※参考：初期化処理を行う！npm initの使い方【初心者向け】 | TechAcademyマガジン
なるほどー。「In it（その中に）」ではなく「initialize（初期化）」なんだね。覚えておこう。
その後ろの-yは、設定の質問の答えを全部「Yes」に指定するという意味で、質問の表示自体をカットできるとのこと！
※参考：webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
それでは、満を持してinit -y実行…（ドキドキ）
お、package.json作られた！
{
"name": "gulp_test1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
ファインダーでも目視できる！
この作業が抜けていたのかー
Gulpのインストール（リベンジ！）
からのGulpインストールリベンジ！
npm install -D gulp
こちらの-Dは「依存オプションの省略」を意味しているらしい。
※参考：webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
それでは実行！
処理中…（ドキドキ）
実行結果
npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size > fsevents@1.2.9 install /Users/（ユーザ名）/Desktop/（フォルダ）/gulp_test1/node_modules/fsevents > node install node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.9/fse-v1.2.9-node-v79-darwin-x64.tar.gz node-pre-gyp WARN Pre-built binaries not found for fsevents@1.2.9 and node@13.1.0 (node-v79 ABI, unknown) (falling back to source compile with node-gyp) SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node COPY /Users/（ユーザ名）/Desktop/（フォルダ）/gulp_test1/node_modules/fsevents/lib/binding/Release/node-v79-darwin-x64/fse.node TOUCH Release/obj.target/action_after_build.stamp npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN gulp_test1@1.0.0 No description npm WARN gulp_test1@1.0.0 No repository field. + gulp@4.0.2 added 384 packages from 238 contributors and audited 6509 packages in 15.512s 2 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
うーむ、まだWARNは出てるな。。
翻訳
npm WARN deprecated fsevents@1.2.9：依存関係の1つがfsevents v2にアップグレードする必要があります：1）適切なnodejs v10 +サポート2）AWSからバイナリを取得しなくなった、パッケージサイズが小さい > fsevents@1.2.9 install / Users /（ユーザー名）/ Desktop /（フォルダ）/ gulp_test1 / node_modules / fsevents >ノードのインストール node-pre-gyp WARN node-pre-gyp httpsダウンロードにニードルを使用 node-pre-gyp WARNをダウンロードしようとしました（404）：https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.9/fse-v1.2.9-node-v79-darwin-x64 .tar.gz node-pre-gyp WARN fsevents@1.2.9およびnode@13.1.0（node-v79 ABI、不明）のビルド済みバイナリが見つかりません（node-gypでソースコンパイルにフォールバック） SOLINK_MODULE（target）Release / .node CXX（target）Release / obj.target / fse / fsevents.o SOLINK_MODULE（target）Release / fse.node COPY / Users /（ユーザー名）/ Desktop /（フォルダ）/gulp_test1/node_modules/fsevents/lib/binding/Release/node-v79-darwin-x64/fse.node TOUCH Release / obj.target / action_after_build.stamp npm noticeは、package-lock.jsonとしてロックファイルを作成しました。このファイルをコミットする必要があります。 npm WARN gulp_test1@1.0.0説明なし npm WARN gulp_test1@1.0.0リポジトリフィールドなし。 + gulp@4.0.2 238人の貢献者から384個のパッケージを追加し、15.512秒で6509個のパッケージを監査しました 2つのパッケージが資金を探しています 詳細については、「npm Fund」を実行します 0個の脆弱性が見つかりました
ただ、少なくともフォルダ空っぽではなくなった！
+gulp以下のメッセージの比較
最初のフォルダ空っぽのとき
+ gulp@4.0.2 updated 1 package and audited 21528 packages in 2.481s 2 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
インストールできたとき
+ gulp@4.0.2 added 384 packages from 238 contributors and audited 6509 packages in 15.512s 2 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
比較すると1行目が違う表記になっている。
空っぽ版
updated 1 package and audited 21528 packages in 2.481s
「2.481で1個のパッケージを更新し、21528個のパッケージを監査しました」
インストール版
added 384 packages from 238 contributors and audited 6509 packages in 15.512s
「238人の貢献者から384個のパッケージを追加し、15.512秒で6509個のパッケージを監査しました]
「1個のパッケージを更新」と「384個のパッケージを追加」の違い。addedじゃないとファイルが追加されていないようだ。
Package.jsonを見てみる
次にルート直下Package.jsonを開いてみる。
{ "name": "gulp_test1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "gulp": "^4.0.2" } }
package.json作成直後と比較するとdevDependenciesキーが追加されていいる。値も連想配列で"gulp": "^4.0.2"となっている！
devDependenciesキーは開発者がインストールしたパッケージという意味らしい。（開発者以外がインストールするとDependenciesキーに追加される）
※参考：【いまさらですが】package.jsonのdependenciesとdevDependencies - Qiita
開発者によってGulpの4.0.2がインストールされた状態ということ。
最後に
ということで5分で終わるはずのGulpに3日かかりました。原因は下記でした。
- 最初のインストール時はNodeやnpmのバージョンが古く失敗
- 次のインストール時にフォルダ内にpackage.jsonを作り忘れた
焦る気持ちで実行結果のエラーコードを斜め読みしていたのも敗因です。「なんだか文字の塊がある。赤いヤバそうな字が出てる」と逃げちゃダメだ。塊も一行ごとに分解できる…。
あと、グローバルインストールとローカルインストールの違いがわかっていれば、ローカルインストールなのに「グローバルのpackage.jsonがありません」という実行結果が出ることに疑問を抱くなど、類推ができたと思います。
結局のところ、PC構造の理解不足、コマンドの不慣れなども原因になっていたと思います。今回の回り道も経験の一つとして、今後に活かしていきたく思います。
メタ言語シリーズ、次回からはいよいよメタ言語（テンプレートエンジン、AltCSS、AltJS）のいずれかをコンパイルしてみようかと思います。それではまた！
※参考：Web開発環境についてのまとめ
qiita.com
