回答編集履歴
3
npm root -g -> npm bin -gに修正
answer
CHANGED
|
@@ -51,15 +51,15 @@
|
|
|
51
51
|
- ローカル(package.jsonと同階層≒プロジェクトルート)
|
|
52
52
|
|
|
53
53
|
まずはグローバル領域に関する事をみていきましょう。
|
|
54
|
-
npmのグローバル領域は`npm
|
|
54
|
+
npmのグローバル領域は`npm bin -g`コマンドで確認することができます。
|
|
55
55
|
`npm install -g gulp`等のコマンドのように`-g`オプションを付けて実行すると、
|
|
56
|
-
`npm
|
|
56
|
+
`npm bin -g`で表示されるパスに実行ファイルが設置されます。
|
|
57
57
|
|
|
58
|
-
ですが、その`npm
|
|
58
|
+
ですが、その`npm bin -g`は環境変数のPATHに入っていますか？
|
|
59
59
|
本当に？実際に下記2つのコマンドを実行して確認してみてください。
|
|
60
60
|
|
|
61
61
|
```Bash
|
|
62
|
-
$ npm
|
|
62
|
+
$ npm bin -g
|
|
63
63
|
$ echo $PATH
|
|
64
64
|
```
|
|
65
65
|
|
|
@@ -67,16 +67,16 @@
|
|
|
67
67
|
含まれていなければ上記の環境変数に関しての記事を閲覧してください。
|
|
68
68
|
|
|
69
69
|
恐らく質問文の状況は`npm install --save-dev gulp`なので、
|
|
70
|
-
`npm
|
|
70
|
+
`npm bin -g`で表示されるパスには含まれていないと思います。
|
|
71
71
|
下記コマンドを実行して追加される事を確認してみてください。
|
|
72
72
|
|
|
73
73
|
```Bash
|
|
74
|
-
$ ls $(npm
|
|
74
|
+
$ ls $(npm bin -g)
|
|
75
75
|
// gulp ファイルはありますか？
|
|
76
76
|
|
|
77
77
|
$ npm install -g gulp
|
|
78
78
|
|
|
79
|
-
$ ls $(npm
|
|
79
|
+
$ ls $(npm bin -g)
|
|
80
80
|
gulp
|
|
81
81
|
|
|
82
82
|
$ gulp --version
|
2
windowsのリンクがミスってたのを修正
answer
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
それを紐解く為には環境変数のPATHの理解が必要となります。
|
|
18
18
|
まずは貴方のパソコン内の環境変数のPATHを表示してみてください。
|
|
19
19
|
|
|
20
|
-
- [Windows 環境変数 Path の設定方法](next.matrix.jp/config-path-win7.html)
|
|
20
|
+
- [Windows 環境変数 Path の設定方法](http://next.matrix.jp/config-path-win7.html)
|
|
21
21
|
- [PATHを通すために環境変数の設定を理解する (Mac OS X)](https://qiita.com/soarflat/items/d5015bec37f8a8254380)
|
|
22
22
|
|
|
23
23
|
```Bash
|
1
回筆修正
answer
CHANGED
|
@@ -3,33 +3,138 @@
|
|
|
3
3
|
|
|
4
4
|
何故聞いたのかというと、超重要だからです。
|
|
5
5
|
|
|
6
|
-
普通npmモジュールの内、コマンドラインとして利用出来るパッケージも存在しますが、
|
|
7
|
-
|
|
6
|
+
---
|
|
8
7
|
|
|
8
|
+
【追記部分】CLIの操作とパスに関して
|
|
9
|
+
|
|
10
|
+
一旦レベルを落としましょう。
|
|
11
|
+
今回の質問は`gulp`というコマンドが認識されない、認識して欲しいが要件ですからね。
|
|
12
|
+
どうなれば条件達成なのかを知るという意味で軽くおさらいしましょう。
|
|
13
|
+
|
|
14
|
+
ターミナルに打ち込まれた`コマンド`は誰がどういう順番で解析して、
|
|
15
|
+
何が実行されているか確認したことはありますか？
|
|
16
|
+
|
|
17
|
+
それを紐解く為には環境変数のPATHの理解が必要となります。
|
|
18
|
+
まずは貴方のパソコン内の環境変数のPATHを表示してみてください。
|
|
19
|
+
|
|
20
|
+
- [Windows 環境変数 Path の設定方法](next.matrix.jp/config-path-win7.html)
|
|
21
|
+
- [PATHを通すために環境変数の設定を理解する (Mac OS X)](https://qiita.com/soarflat/items/d5015bec37f8a8254380)
|
|
22
|
+
|
|
23
|
+
```Bash
|
|
24
|
+
# Windows の場合
|
|
25
|
+
$ path
|
|
26
|
+
C:\Windows;C:\Windows\System32;....
|
|
27
|
+
|
|
28
|
+
# MacOS / Linux の場合
|
|
29
|
+
$ echo $PATH
|
|
30
|
+
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:...
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Windows, MacOS, Linuxなどなど…多少の差異はありますが概ねこんな感じです。
|
|
34
|
+
Windowsの場合は`;`が区切り文字、MacOSやLinuxでは`:`が区切り文字として扱われます。
|
|
35
|
+
|
|
36
|
+
コマンドラインで何かしらのコマンドが実行された場合、
|
|
37
|
+
この環境変数PATHの文字列の左から順にコマンドあるかな？…と探しにいき、
|
|
38
|
+
そのフォルダの配下に実行ファイルがあればそれを使って実行…という流れになっています。
|
|
39
|
+
|
|
40
|
+
環境変数PATHで記されたいくつかのディレクトリがありますが、
|
|
41
|
+
その中の直下に`gulp`というファイルがなければ
|
|
42
|
+
「gulp？そんなコマンドねーよ」というエラーが帰ってきます。
|
|
43
|
+
|
|
9
44
|
---
|
|
10
45
|
|
|
46
|
+
【追記部分】npmのグローバルインストールと環境変数PATH
|
|
47
|
+
|
|
48
|
+
npmのインストールには2つの概念があります。
|
|
49
|
+
|
|
50
|
+
- グローバル
|
|
51
|
+
- ローカル(package.jsonと同階層≒プロジェクトルート)
|
|
52
|
+
|
|
53
|
+
まずはグローバル領域に関する事をみていきましょう。
|
|
54
|
+
npmのグローバル領域は`npm root -g`コマンドで確認することができます。
|
|
55
|
+
`npm install -g gulp`等のコマンドのように`-g`オプションを付けて実行すると、
|
|
56
|
+
`npm root -g`で表示されるパスに実行ファイルが設置されます。
|
|
57
|
+
|
|
58
|
+
ですが、その`npm root -g`は環境変数のPATHに入っていますか？
|
|
59
|
+
本当に？実際に下記2つのコマンドを実行して確認してみてください。
|
|
60
|
+
|
|
61
|
+
```Bash
|
|
62
|
+
$ npm root -g
|
|
63
|
+
$ echo $PATH
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
含まれていれば一安心。
|
|
67
|
+
含まれていなければ上記の環境変数に関しての記事を閲覧してください。
|
|
68
|
+
|
|
69
|
+
恐らく質問文の状況は`npm install --save-dev gulp`なので、
|
|
70
|
+
`npm root -g`で表示されるパスには含まれていないと思います。
|
|
71
|
+
下記コマンドを実行して追加される事を確認してみてください。
|
|
72
|
+
|
|
73
|
+
```Bash
|
|
74
|
+
$ ls $(npm root -g)
|
|
75
|
+
// gulp ファイルはありますか？
|
|
76
|
+
|
|
77
|
+
$ npm install -g gulp
|
|
78
|
+
|
|
79
|
+
$ ls $(npm root -g)
|
|
80
|
+
gulp
|
|
81
|
+
|
|
82
|
+
$ gulp --version
|
|
83
|
+
5.5.1
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
【プチ加筆】応用編、ローカルを上手く使う
|
|
89
|
+
|
|
90
|
+
貴方がデザイナー的な立場の人間でNode.jsとかもう使わんし！
|
|
91
|
+
…というのであれば前項まで行えば使える様になっているはずです。
|
|
92
|
+
|
|
11
|
-
ブログを見
|
|
93
|
+
ブログやQiitaの記事等を見れば`npm install --save-dev gulp`を推奨している記事がありますね。
|
|
94
|
+
これを利用すると、package.jsonが存在するディレクトリと同階層に`node_modules/.bin`というフォルダを作成して、その中に`gulp`の実行ファイルを投げ込みます。
|
|
95
|
+
|
|
96
|
+
あれ、ちょっとまって。
|
|
97
|
+
環境変数のPATHに通してないコマンドは認識しないってことは、
|
|
12
|
-
グローバルインストールしないと使えないんじゃないの？
|
|
98
|
+
グローバルインストールしないと`gulp`コマンド使えないんじゃないの？
|
|
99
|
+
意味なくね？
|
|
100
|
+
|
|
13
101
|
実は開発者用インストールには抜け道があります。
|
|
14
|
-
|
|
15
102
|
[npm で依存もタスクも一元化する](https://qiita.com/Jxck_/items/efaff21b977ddc782971)
|
|
16
103
|
|
|
17
104
|
```Bash
|
|
18
105
|
$ npm bin
|
|
19
106
|
ぷろじぇくとるーと/node_modules/.bin
|
|
20
107
|
|
|
108
|
+
$ ls $(npm bin)
|
|
109
|
+
// <- gulpファイルはない
|
|
110
|
+
|
|
21
111
|
$ npm install -D gulp
|
|
22
112
|
|
|
23
|
-
$ ls
|
|
113
|
+
$ ls
|
|
24
114
|
gulp // <- 追加されてる事を確認
|
|
25
115
|
|
|
26
116
|
$ $(npm bin)/gulp --version
|
|
27
117
|
5.5.1
|
|
28
118
|
```
|
|
29
119
|
|
|
120
|
+
どのOSでもそうですが、実は環境変数PATHに入っていないプログラムも、
|
|
121
|
+
`/`や`./`等のディレクトリを指定する文字列から始まるコマンドは、実行ファイルを見つけて直接実行する仕様だからです。
|
|
122
|
+
|
|
123
|
+
なので、package.jsonが入っているディレクトリの中で
|
|
124
|
+
`./node_modules/.bin/gulp`や`$(npm bin)/gulp`などと入力して直接実行ファイルを叩けば実行出来るわけです。
|
|
125
|
+
|
|
126
|
+
しかしこれではまだ不便ですね。
|
|
127
|
+
こんな長ったらしいコマンド毎回打ってられないぞ…なんとかならんか？
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
【加筆修正】応用編、ローカルインストールとnpm-scriptsと併用する
|
|
132
|
+
|
|
30
133
|
更にpackage.jsonのscriptsからの起動(所謂npm-scripts)を利用した場合、
|
|
31
134
|
環境変数のPATHに`npm bin`が足された状態で起動します。
|
|
32
135
|
|
|
136
|
+
package.json (の内のscripts内の項目)
|
|
137
|
+
|
|
33
138
|
```JSON
|
|
34
139
|
"scripts": {
|
|
35
140
|
"gulp": "gulp"
|
|
@@ -38,16 +143,20 @@
|
|
|
38
143
|
|
|
39
144
|
なんじゃこのやる気のないnpm-scriptsは？
|
|
40
145
|
いやいや、色々出来て便利なんですこれ。
|
|
146
|
+
では下記の通りにコマンドを打ち込んでみましょう。
|
|
41
147
|
|
|
42
148
|
```Bash
|
|
149
|
+
$ ls $(npm bin)
|
|
150
|
+
gulp // <- gulpの実行ファイルが存在することを確認
|
|
151
|
+
|
|
43
152
|
$ npm run gulp --version
|
|
44
|
-
5.5.1
|
|
153
|
+
5.5.1 // npm-scriptsによって`gulp`コマンドが発火、パスも通ってる！
|
|
45
154
|
|
|
46
155
|
$ npm run gulp --tasks
|
|
47
|
-
// 登録されているタスクの一覧
|
|
156
|
+
// 登録されているタスクの一覧も見れる！
|
|
48
157
|
|
|
49
158
|
$ npm run gulp build
|
|
50
|
-
// ビルド処理が
|
|
159
|
+
// ビルド処理がちゃんと動いた！
|
|
51
160
|
```
|
|
52
161
|
|
|
53
162
|
より実践的には開発者が使いそうなコマンドは別途用意しておいても良いでしょう。
|