Gruntの環境構築

まずNode.jsをダウンロードインストールする

Node.jsの確認

C:\>node -v
v0.10.33

C:\>npm -v
1.4.28

 

次にGruntのインストール

 Gruntのインストールはnpmでインストールする

C:\>npm install -g grunt-cli

Gruntの確認

C:\>grunt -version
grunt-cli v0.1.13

Gruntを使ってみる

ワークスペースへサンプルディレクトリを作成

c:\workspace\>mkdir gruntSampleApp

 

package.jsonはNode.jsが依存ライブラリなどの環境情報を管理するための設定ファイルで次のように「npm init」コマンドを実行する

c:\workspace\gruntSampleApp>npm init

 

gruntモジュールをインストール

c:\workspace\gruntSampleApp>npm install grunt --save-dev
npm WARN package.json gruntSampleApp@1.0.0 No description
npm WARN package.json gruntSampleApp@1.0.0 No repository field.
npm WARN package.json gruntSampleApp@1.0.0 No README data
grunt@0.4.5 node_modules\grunt
????? dateformat@1.0.2-1.2.3
????? which@1.0.5
????? eventemitter2@0.4.14
????? getobject@0.1.0
????? colors@0.6.2
????? rimraf@2.2.8
????? async@0.1.22
????? hooker@0.2.3
????? grunt-legacy-util@0.2.0
????? exit@0.1.2
????? nopt@1.0.10 (abbrev@1.0.5)
????? minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
????? glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
????? lodash@0.9.2
????? coffee-script@1.3.3
????? underscore.string@2.2.1
????? iconv-lite@0.2.11
????? findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1)
????? grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
?????? js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

 

package.jsonを作成

c:\workspace\gruntSampleApp\package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0"
  }
}

 

Gruntfile.jsを作成する

c:\workspace\gruntSampleApp\Gruntfile.js

module.exports = function (grunt) {

  grunt.registerTask('hello', 'description here', function() {
    grunt.log.writeln('hello! hello!');
  });

  grunt.registerTask('default', [ 'hello' ]);

};

 

gruntを実行してみる

c:\workspace\gruntSampleApp>grunt
Running "hello" task
hello! hello!

 

参考サイト

https://app.codegrid.net/entry/grunt-introduction

http://www.atmarkit.co.jp/ait/articles/1403/04/news020_2.html