【Node.js】gulp(ガルプ)のインストール(その1)

npm(Node Package Manager)
パッケージ(package)
package.json
package-lock.json
ローカルインストール(local install)
gulp(ガルプ)
dependencies
devDependencies

上記の用語を使ってNode.jsについて文章を書いていく。
gulp(ガルプ)はNode.jsのパッケージ(package)の1つである。

gulp(ガルプ)をローカルインストール(local install)する。

手順1
npm initでpackage.jsonを作る。
package.jsonはパッケージの依存関係やversionを管理している。

PS C:\Projects\sample> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Projects\sample\package.json:
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)
PS C:\Projects\sample>

手順2
gulp(ガルプ)をコマンドを打ってローカルインストールする。
実はローカルインストールには2種類ある。
このローカルインストールが2種類あるのは重要と思うから覚えておこう。

「ローカルインストール(–save-devの方)(開発向け)」と「ローカルインストール(–saveの方)(リリース向け)」の2種類ある。
この言い方だけど、「開発向け」、「リリース向け」、「–save-devの方」、「–saveの方」とかでいいのかな？悩むな。この辺は勉強を進めていくと正しい言い方が分かってくるかな？
ローカルインストールするときに「npm install」を行うが、このときに付けるオプションの「–save-dev」と「–save」は別物であることに注意すること。

gulp(ガルプ)をコマンドを打ってローカルインストールすると
package-lock.jsonが自動生成される。
package.jsonを直接テキストエディタで編集することはある。
package-lock.jsonは直接テキストエディタで編集するときがあるのかは不明。

##ローカルインストール(--save-devの方)

npm install --save-dev <パッケージ名>
npm install <パッケージ名> --save-dev 
npm i -D <パッケージ名>
npm install -D <パッケージ名>
npm install <パッケージ名> -D


## ローカルインストール(--saveの方)(リリース向け)

npm i <パッケージ名>
npm install <パッケージ名>
npm install --save <パッケージ名>
npm install <パッケージ名> --save 
npm i -S <パッケージ名>

「ローカルインストール(–save-devの方)(開発向け)」をした場合、
「npm install gulp –save-dev」コマンドを実行する。

PS C:\Projects\sample> npm install gulp --save-dev
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 350 packages, and audited 351 packages in 39s

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

6 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
PS C:\Projects\sample>

「ローカルインストール(–save-devの方)(開発向け)」をした場合、
package.jsonは次にようになる。

{
  "name": "sample",
  "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"
  }
}

「ローカルインストール(–saveの方)(リリース向け)」をした場合
「npm install gulp –save」コマンドを実行する。

C:\Projects5\sample> npm install gulp --save
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

added 350 packages, and audited 351 packages in 36s

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

6 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

C:\Projects5\sample>

「ローカルインストール(–saveの方)(リリース向け)」をした場合
package.jsonは次にようになる。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2"
  }
}

このような挙動から
「ローカルインストール(–save-devの方)(開発向け)」はpackage.jsonのdevDependenciesにgulpが追加される。
「ローカルインストール(–saveの方)(リリース向け)」はpackage.jsonのdependenciesが追加される。
つまり、「ローカルインストール(–save-devの方)(開発向け)」と「ローカルインストール(–saveの方)(リリース向け)」はpackage.jsonのdevDependenciesとdependenciesの違いになる。

dependencies：本番環境でも利用するパッケージやその依存関係。
devDependencies：テスト環境と開発環境で利用するパッケージやその依存関係。

開発者がpackage.jsonがあるディレクトリでnpm installを行うと、dependenciesに書かれているパッケージもdevDependenciesに書かれているパッケージもすべてnode_modules内にインストールされる。

開発者が自作したパッケージsampleを公開し、開発者以外の人がnpm install sampleとしたときには、dependenciesに書かれているパッケージがnode_modules内にインストールされ、devDependenciesに書かれているパッケージはインストールされない。

このような違いがdevDependenciesとdependenciesにあるが、この辺がいまいちピンとこない。
devDependenciesとdependenciesで分けるメリットが理解できない。

手順3
gulp(ガルプ)がローカルインストールされたことを確認する。
「ローカルインストール(–save-devの方)(開発向け)」と「ローカルインストール(–saveの方)(リリース向け)」の場合は、
「gulp -v」が認識されない。これはグローバルインストールではないためである。
「node .\node_modules\gulp\bin\gulp.js -v」が認識される。これでversionが表示されたらローカルインストールが成功している。

C:\Projects\sample>gulp -v
'gulp' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

C:\Projects\sample>node .\node_modules\gulp\bin\gulp.js -v
CLI version: 2.3.0
Local version: 4.0.2

C:\Projects\sample>

C:\Projects5\sample>gulp -v
'gulp' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

C:\Projects5\sample>node .\node_modules\gulp\bin\gulp.js -v
CLI version: 2.3.0
Local version: 4.0.2

C:\Projects5\sample>

手順4
gulp(ガルプ)がローカルインストールされたことを確認する(その2)。
scriptプロパティにgulpを追加して「npm run gulp -v」コマンドを打つとversionが表示されようになる。ただし、このversionがnpmのversionみたい。なんでgulpのversionではなくnpmのversionが表示されるのだろうか？分からない。

「ローカルインストール(–save-devの方)(開発向け)」の場合
package.jsonに「”gulp”:”gulp”,」に追加はテキストエディタで編集をする。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp":"gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

C:\Projects\sample>npm run gulp -v
8.13.2

C:\Projects\sample>npm -v
8.13.2

「ローカルインストール(–saveの方)(リリース向け)」の場合
package.jsonに「”gulp”:”gulp”,」に追加はテキストエディタで編集をする。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp":"gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2"
  }
}

C:\Projects5\sample>npm run gulp -v
8.13.2

C:\Projects5\sample>npm -v
8.13.2

手順5

インストールされたパッケージを一覧する「npm ls」コマンドを実行してgulpがインストールされていることを確認できる。

C:\Projects\sample>npm list gulp
sample@1.0.0 C:\Projects\sample
`-- gulp@4.0.2
C:\Projects\sample>cd C:\Projects5\sample

C:\Projects5\sample>npm ls
sample@1.0.0 C:\Projects5\sample
`-- gulp@4.0.2

C:\Projects5\sample>

続きの記事
Node.js入門(勉強 その2) gulp(ガルプ)のインストール(その2) (attacktube.com)
関連記事
Node.jsに出てくる用語 (attacktube.com)

参考
【いまさらですが】package.jsonのdependenciesとdevDependencies – Qiita ExternalLink
【Node.js】dependenciesとdevDependenciesの違い – Qiita ExternalLink

• 
• Tweet

• Node.js