Edited at

npm から gulp インストールまでの手順

More than 3 years have passed since last update.

こういうのすぐ忘れるのでメモしつつ、新しい発見があったら追記。

自分で書かないと覚えないんだよなぁ。


node.js

╭( ・ㅂ・)و node.js をインストールしておきます。

https://nodejs.org/en/


npm(Node Package Manager)の設定・確認

╭( ・ㅂ・)و node.jsをインストールをするとnpmコマンドが使えるようになります。


npmのバージョンを確認しておく

npm -v


npmのバージョンを最新にしておく

╭( ・ㅂ・)و 既にインストール済みであれば、最新バージョンを導入しておきます。

2016/07/23 時点 version 3.10.5 が最新みたい。

sudo npm install -g npm


npmの設定ファイルを作成

npm init

╭( ・ㅂ・)و コマンドを叩いたディレクトリに package.json というファイルができます。


gulpの設定・確認

╭( ・ㅂ・)و gulpはグローバルとローカルにインストールする必要があります。


グローバルインストール

╭( ・ㅂ・)و ローカルにインストールした gulp を実行させるためにグローバルの gulp は必要らしい。

sudo npm install -g gulp


ローカルインストール


  • --save

sudo npm install gulp --save

--save パラメータは、 package.jsondependencies という項目に追加されます。

  "dependencies": {

"gulp": "^3.9.1"
},


  • --save-dev

--save-dev パラメータは、 package.jsondevDependencies という項目に追加されます。

  "devDependencies": {

"gulp": "^3.9.1"
},


Q. dependencies と devDependencies の違いは?

╭( ・ㅂ・)و [ dependencies(意味:依存関係) ]

その名の通り、そのパッケージに依存するファイルを管理しています。例えば jQuery などWebサイトに使用するファイルは、 dependencies で管理しますかね。

npm install jquery --save

バージョン指定をする場合には、インストールするパッケージ名の後ろに @ でバージョンを指定します。(指定なしは最新バージョンがインストールされます)

npm install jquery@1.11.3 --save

╭( ・ㅂ・)و [ devDependencies(意味:開発者に必要な依存関係) ]

実際のパッケージには必要ないファイルで、開発時に使用するものはこちらですかね。 gulp はこっちでいいかな。

npm install gulp --save-dev


package.json の役割

npm install--save をつけると、 package.json にインストールしたパッケージ名とそのバージョンが自動的に保存されます。これで npm コマンドが使えるPCであれば同じ環境を作ることが出来ます。インストールしたファイルごと管理しなくて済むステキツール。

node_modules というディレクトリに npm でインストールしたものは保存されるので、 .gitignore で監視下から外しておくことでインストールしたファイルまでバージョン管理しなくてよくなります。 package.json だけメンテナンスしておけばいいんだもんね。

gulp ファイルの設定は別の記事に書こう。混乱する。自分が。| ω・)