Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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 ファイルの設定は別の記事に書こう。混乱する。自分が。| ω・)

miiitaka
フロントエンドエンジニア。 HTML/CSS/JavaScript ときどきPHP/DB。WordPressの公式プラグインをいくつか公開しています。お仕事のご相談があればSNSのDMなどで。
https://manabito.biz/
manabito
宮崎県宮崎市で教育事業やWeb制作事業・ITコンサルティング事業・企業研修代行事業などを行っています。
https://manabito.biz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away