2013년 11월 20일 수요일

Grunt 설치하기

1) Node.js를 먼저 설치한다.
(npm을 설치해도 되지만 Node.js를 이용하면 수 많은 기능을 사용할 수 있는 기회가 주어지므로 Node.js를 설치하여 같이 설치되는 npm을 활용하도록 한다.)


2)  grunt의 Command Line Interface를 먼저 설치한다.Command Line에 다음의 명령을 입력한다.

명령 : npm install -g grunt-cli
결과 :  설치과정 진행


3)  grunt-cli의 설치 여부 확인
Command Line에 다음의 명령을 입력한다.

명령 : grunt -version
결과 : grunt-cli v0.1.11

주의 : 명령을 grunt 라고 입력하면 Fatal error : Unable to find local grunt 라는 메세지가 나온다.
이것은 현재 프로젝트 폴더에 grunt가 설치되지 않아서 발생되는 현상이며 아래의 과정을 진행하면
해당 메세지는 표시되지 않는다.


4) grunt가 설치될 폴더(프로젝트 폴더)로 이동한다.
command Line에 다음의 명령을 입력한다.

명령 : cd 이동할 폴더


5) grunt와 grunt plugin을 설치하기 위해서 package.json을 생성한다.메모장에서 다음의 내용을 입력한 후에 프로젝트 폴더의 하부에 package.json이라는 이름으로 파일을 생성한다.
(package.json을 메모장을 이용해서 생성해도 되지만 "npm init" 혹은 "grunt-init"을 이용해도 된다.
 => 하지만 아래의 package.json을 npm init을 이용해서 - grunt는 설치되지 않은 상황이므로- 생성하는 것이 쉽지 않았다)
{
    "name": "todo-jqm-app",
    "version": "1.0.2",
    "dependencies": {},
    "devDependencies": {
     "grunt": "~0.4.1",
        "grunt-contrib-copy": "~0.4.0",
        "grunt-contrib-concat": "~0.1.2",
        "grunt-contrib-coffee": "~0.4.0",
        "grunt-contrib-uglify": "~0.1.1",
        "grunt-contrib-compass": "~0.1.2",
        "grunt-contrib-jshint": "~0.1.1",
        "grunt-contrib-cssmin": "~0.4.1",
        "grunt-contrib-connect": "0.1.2",
        "grunt-contrib-clean": "0.4.0",
        "grunt-contrib-htmlmin": "0.1.1",
        "grunt-contrib-imagemin": "0.1.2",
        "grunt-contrib-livereload": "0.1.1",
        "grunt-release": "0.3.2",
        "grunt-bower-hooks": "~0.2.0",
        "grunt-usemin": "~0.1.9",
        "grunt-regarde": "~0.1.1",
        "grunt-requirejs": "~0.3.2",
        "grunt-mocha": "~0.2.2",
        "grunt-open": "~0.2.0",
        "matchdep": "~0.1.1"
 },
    "engines": {
     "node": ">=0.8.0"
 }
}


6) grunt와 grunt plugin을 설치하기Command Line에 다음의 명령을 입력한다.

명령 : npm install grunt --save-dev
결과 :  설치과정 진행되고 프로젝트 폴더 아래에 node_modules 폴더에 grunt 관련 파일이 생성된다.