npmを試してみる - yk5656 diary (旧)

npmを試してみる。

準備

Mac上の適当なディレクトリでCentOSを用意し、

mac$ vagrant init bento/centos-7.2
mac$ vagrant up
mac$ vagrant ssh

Node.jsとnpmをインストールする。

$ sudo yum install -y epel-release
$ sudo yum install -y nodejs npm

入った。

$ npm -v 1.3.6

例

今回は、gruntでのcssの圧縮を例に確認してみる。

ひとまず、grunt-cliをインストールしておく。

$ sudo npm install -g grunt-cli

下記のcssを圧縮してみる。

$ vi sample.css

 * {
   margin: 0;
   padding: 0;
 }

cssを圧縮するGruntfileを用意する。

$ vi Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    cssmin: {
      sample: {
        src: 'sample.css',
        dest: 'sample.min.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

この時点で試しに実行すると、gruntがローカルに無い、と怒られる。

$ grunt cssmin
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

・・・

gruntとcssminのプラグインをインストールし、

$ npm install grunt
$ npm install grunt-contrib-cssmin

実行すると、

$ grunt cssmin

cssが圧縮される。

$ cat sample.min.css

 *{margin:0;padding:0}

インストールしたパッケージの確認

インストールしたパッケージは「npm ls」で確認できる。
cssminなどがインストールされているのが確認できる。

$ npm ls | grep grunt
├─┬ grunt@1.0.1
│ ├─┬ grunt-cli@1.2.0
│ ├── grunt-known-options@1.1.0
│ ├─┬ grunt-legacy-log@1.0.0
│ │ ├─┬ grunt-legacy-log-utils@1.0.0
│ ├─┬ grunt-legacy-util@1.0.0
└─┬ grunt-contrib-cssmin@1.0.1

node_modules

「npm install XXX」でインストールすると、実行したディレクトに node_modulesというディレクトリが作成される。

$ ls
Gruntfile.js  node_modules  sample.css  sample.min.css

node_modulesのディレクトリを削除すると、

$ rm -rf node_modules

インストールしたもの全て無くなり、

$ npm ls | grep grunt

実行してもエラーになる。

$ grunt cssmin
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

・・・

インストールするパッケージをpackage.jsonで管理

package.jsonにインストールしたいパッケージを書いておくと、インストールが楽になる。

下記のようにpackage.jsonを作成し、

$ vi package.json

{
  "dependencies": {
    "grunt": "*",
    "grunt-contrib-cssmin": "*"
  }
}

「npm install」を実行すると、

$ npm install

gruntとcssminがインストールされる。

$ npm ls | grep grunt
├─┬ grunt@1.0.1
│ ├─┬ grunt-cli@1.2.0
│ ├── grunt-known-options@1.1.0
│ ├─┬ grunt-legacy-log@1.0.0
│ │ ├─┬ grunt-legacy-log-utils@1.0.0
│ ├─┬ grunt-legacy-util@1.0.0
└─┬ grunt-contrib-cssmin@1.0.1

インストール時にpackage.jsonに追加

npm installで「--save」オプションを付けると、インストールと同時にpackage.jsonにも追加してくれる。

試しに、grunt-contrib-uglifyをインストールしてみる。

$ npm install --save grunt-contrib-uglify

package.jsonに追加されているのが確認できる。

$ cat package.json

{
  "dependencies": {
    "grunt": "*",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-uglify": "~1.0.1"
  }
}

dependenciesのバージョンの指定については下記が参考になります。

npm package.json 日本語版 取扱説明書
http://liberty-technology.biz/PublicItems/npm/package.json.html#dependencies

補足

package.jsonの雛形

上記の、dependenciesのみのpackage.jsonでは、インストール時などに警告がでる。

npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data

npm initでは、対話形式でpackage.jsonが作成できる。

実行して、適当に入力していくと、

$ npm init

package.jsonが作成される。

$ cat package.json

{
  "name": "sample",
  "version": "0.0.0",
  "description": "Hello, world!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD"
}

dependenciesとdevDependencies

上記の例では、dependenciesに必要なパッケージを記述しましたが、 devDependenciesというのもあって、 gruntのような開発に必要なパッケージは、devDependenciesに書いたほうが良いみたい。

$ cat package.json

{
  ・・・
  "dependencies": {
    // プロジェクトの実行に必要なパッケージ
  },
  "devDependencies": {
    // プロジェクトの開発に必要なパッケージ
  },
  ・・・
}