Gruntの環境構築

Table of Contents

まず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!

 

参考サイト

Just a moment...
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール(Grunt、Yeoman、Bowerなど)やエディター、IDE、実行環境などを紹介していく連載。初回は主なビルドツールを紹介し、Gru...
タイトルとURLをコピーしました