grunt

angularjs 를 시작하다 보니, 기존에 server-side에서와는 많이 다른 tool들이 보인다. 하나씩 정리가 필요한거 같아서, 필요할 때마다 작성하는 걸로.

yeoman은 yo, bower, grunt 로 이루어져있다. 이 중에서 grunt 는  ant, gradle 의 포지션을 가지고 있는 'task runner'이다. 쉽게 빌드 툴이라고 생각하자. (추가적으로 템플릿 제공등을 한다)

#1. 설치 : 맥에서 설치에 큰 어려움은 없다.    npm을 이용해 global로 설치를 하자.

참고 : http://gruntjs.com/getting-started

#2. 프로젝트 생성
maven : pom.xml 이나 gradle 의 build.gradle 처럼 grunt 는 Gruntfile.js를 근간으로 하고 있다. 하지만 얘를 바로 만들기는 어려우니 템플릿을 한번 이용해 보는걸로 시작하자.

참고 : http://gruntjs.com/project-scaffolding

grunt-init는 기본 프로젝트의 뼈대를 쉽게 만들어 주는 템플릿 cli이다.  역시 npm을 설치하고 grunt-init --help을 쳐보면 vailable templates 이 하나도 없다고 한다. 위의 참고 링크를 조금만 내려보면 기본 템플릿의 종류가 설치 방법을 확인 할 수 있다.

참고 :  http://gruntjs.com/project-scaffolding#installing-templates

방법은  github를 ~/.grunt-init으로 clone하는 방법으로 이루어진다.  해서 commonjs, jquery 를 clone해온다.
이후 grunt-init을 보면 사용가능한 템플릿 리스트에 표시가 된다.

프로젝트 폴더를 하나 생성하고 grunt-init commons를 이용하여 생성해본다.

몇가지 물음에 대답하면 해당 데이터를 기반으로 몇몇 파일을 만들어 주며 common-js 템플릿의 기본 뼈대 ( https://github.com/gruntjs/grunt-init-commonjs-sample/tree/generated ) 를 기반으로 프로젝트 구조를 생성해주는 것~

이렇게 생성되는 파일 리스트 중에는 '.gitignore / .jshintrc' 처럼 부가적인 파일도 있지만 제일 중요한건 Gruntfile.js 이다. 이 안에는 task들이 정의되어 있는데

"grunt --help"를 입력하면

실행 가능한 task list가나오고 그냥 "grunt"를 입력하면 default 인 
grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']); 가 실행이 된다.
(이 내용은 Gruntfile.js 제일 하단에서 발견 할 수 있을 것이다)

혹시나 grunt를 실행했는데 

Fatal error: Unable to find local grunt.

이딴식으로 나오면 " npm install " 을 한번 실행해주자.

grunt 0.4 부터 contrib 의존 node_module들이 프로젝트 하위로 들어가는거 같은데... 없어서 그렇다. 실제로 npm install을 실행해보면     node_modules이 생성되고 안에 머머가 생기는걸 확인 할 수 있다