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...