[컴][웹][javascript] Grunt 사용하기

그런트 / grunt cli 사용하기 / windows 에서 grunt 사용하기 / grunt 로 compile 하기 / grunt 사용법

Grunt 를 사용한 project 를 compile 할 때

grunt 를 사용한 project 를 compile 할 때는 grunt-cli 만 설치하면 된다.

굳이 애써서 알맞은 버전의 grunt 를 install 할 필요가 없다. gradle 과 비슷한 느낌인데, npm install 을 통해서 알맞은 버전의 grunt 과 함께 다른 필요한 module 들을 설치 해 주게 된다.

보통 grunt 로 만들어진 project 는 package.json 을 가지고 있다. 이 녀석은 npm 에서 사용하는 녀석인데 npm 이 이 package.json 을 읽어서 필요한(dependency 가 있는) module 을 설치하게 된다.
package.json 은 npm init 을 통해서 만들어지는데, 이녀석을 만들고, npm install 을 할 때 --save 옵션을 통해서 package.json 을 계속 update 할 수 있다. 이렇게 만들어진 녀석이 있다면, npm install 을 통해서 package.json 에 있는 package 들을 한번에 설치하게 된다.

절차

여기서는 grunt-cli 를 local 에 설치하는 방법을 이야기 한다.

1. npm install grunt-cli
2. project 가 있는 path 에 간다
3. package.json 이 있는 곳에서 npm install 실행
4. 같은 위치에서 grunt 실행
• "<nodejs-path>\node.exe" "<nodejs-path>\node_modules\grunt-cli\bin\grunt"

Command Line interface (CLI) 설치하기

npm 을 이용해서 설치할 수 있다. 그러기 위해서는 node js 를 미리 설치하자.(참고 : Node js 설치)

c:\Program Files\nodejs>npm install -g grunt-cli
C:\Users\namhadmin\AppData\Roaming\npm\grunt -> C:\Users\namhadmin\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\namhadmin\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

// install to the locally
c:\Program Files\nodejs>npm install grunt-cli
grunt-cli@0.1.13 node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

error

혹시 아래와 같은 error 가 발생한다면 C:\Users\<user_name>\AppData\Roaming 에 npm 폴더를 만들어 주자.

c:\Program Files\nodejs>npm install
Error: ENOENT, stat 'C:\Users\<user_name>\AppData\Roaming\npm'

grunt 로 된 project 에서 grunt 설치

grunt 를 사용하는 package 에서 grunt 를 사용하기 위해서는 package.json 이 있는 곳으로 간다. (package.json) 여기서 다시 npm install 을 실행하자. 그러면 아래 경로에 grunt 를 설치해 준다.

• <nodejs-path>\node_modules\grunt-cli\node_modules\grunt\

참고로 package.json 은 npm 에서 사용하는 녀석이다. npm 이 이 package.json 을 보고 필요한 녀석들을 알아서 repository 에서 가져와서 local 에 설치해 주는 것이다.

c:\Program Files\nodejs\node_modules\grunt-cli>npm install
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
├── lodash@0.9.2
├── underscore.string@2.2.1
├── coffee-script@1.3.3
├── iconv-lite@0.2.11
├── 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)
├── grunt-legacy-log@0.1.1 (lodash@2.4.1, underscore.string@2.3.3)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

grunt-contrib-jshint@0.2.0 node_modules\grunt-contrib-jshint
└── jshint@1.0.0 (peakle@0.0.1, underscore@1.7.0, shelljs@0.3.0, minimatch@0.4.0, cli@0.4.3, esprima@2.0.0-dev)

grunt 실행

grunt-cli/bin/grunt 를 호출한다.

• "<nodejs-path>\node.exe" "<nodejs-path>\node_modules\grunt-cli\bin\grunt"

References

1. http://gruntjs.com/getting-started
2. Core Tasks are now Grunt Plugins
3. http://gruntjs.com/plugins