gruntjs 기본에 대한 장표

1. Grunt
손 찬 욱

2. Grunt 의미
The JavaScript
Task Runner

3. 자동화 툴?

4. 왜? Grunt를 발표하는가?
“최소의 노력으로 어떤 것이든 자동화 할 수 있다.”
1. Descriptive language
2. Programing (nodejs)
3. 많은 플러그인 제공 (javascirpt,css)
4. 쉬운 플러그인 제작과 배포
5. Scaffolding 제공

5. Grunt Project
Grunt-cli
라이브러리 의존성 관리
grunt Gruntfile.js
NPM package.json
watch uglify jshint concat …
자동화
Grunt-init
scaffollding
From NPM

6. Grunt 맛보기 (데모)
1. Grunt 설치
npm install –g grunt-cli
npm install –g grunt-init
2. Jquery-plugin 기반 Project 생성
git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
(http://gruntjs.com/installing-grunt)
Nodejs >= 0.8.0 이상 설치
(http://gruntjs.com/project-scaffolding)
4. Grunt 사용하기
grunt
3. Jquery-plugin 기반 Project 생성
grunt-init jquery
npm install // 관련 모듈 다운로드

7. Grunt 사용하기
• grunt를 파라미터로 받는 모듈에서
grunt.initConfig를 통해 설정.
• Task 밑에 target으로 구성
• Task 외에 별도 property 지정가능
• Target은 src,dest 로 구성됨
• Target의 src,dest는 다양한 방식으로
지정가능함.
• Task와 target은 옵션을 가질 수 있음
• 프로그래밍을 통해 외부데이터를
import 할 수 있음
• 템플릿 (<%=%>)을 사용하여 설정 값
을 참고할 수 있음
• task를 loadNpmTasks를 통해 로드
• registerTask를 통해 사용자 Task등록
(Task 만들기 부분 참조)
1. Gruntfile.js 설정

8. Grunt 사용하기
grunt [task:target] [task:target] …
• Grunt만 실행 했을 경우, default task가 실행됨
grunt
• 특정 task의 target을 실행할 수 있음.
grunt qunit:tar1 qunit:tar2
• Task 만 지정하였을 경우, 모든 target이 순차적으로 실행됨
grung qunit
• 다수의 task를 한 번에 실행 할 수 있음
grunt qunit concat uglify
2. Grunt 실행

9. Grunt 사용하기
grunt.registerTask(taskname, [description], tasklist/taskfunction);
• resisterTask는 alias 작업을 등록할 수 있다.
grunt.registerTask(“dist”, [“jshint”, “qunit”]);
-> grunt dist
• resisterTask는 기본 작업을 등록할 수 있다.
(Gruntfile.js 와 상관 없이 작업)
-> grunt start:가:a
3. Grunt task 만들기 - 1 (resisterTask)

10. Grunt 사용하기
grunt.registerMultiTask(taskname, [description], taskfunction);
• registerMultiTask로 사용자 작업을 등록할 수 있다.
-> grunt log:foo
grunt log
4. Grunt task 만들기 - 2 (resisterMultiTask)

11. Grunt 실사용 예
• grunt jshint를 이용한 javascript 정적 검사
• grunt qunit을 이용한 테스트 케이스 검사
• grunt watch를 이용한 실시간 테스트 개발하기
• grunt concat을 이용한 javascript 파일 합쳐 배포 파일 만들기
• grunt uglify를 이용한 javascript 배포 파일 압축하기
실 예제 데모

12. 정리
“최소의 노력으로 어떤 것이든 자동화 할 수 있다.”
1. Descriptive language
2. Programing (nodejs)
3. 많은 플러그인 제공
4. 쉬운 플러그인 제작과 배포
5. Scaffolding 제공

13. Q & A
질문 있으신가요?

14. FAQ
2. Npm 템플릿은 직접 만들어 배포할 수 있나요?
http://gruntjs.com/project-scaffolding#custom-templates
1. Npm 플러그인은 직접 만들어 배포할 수 있나요?
http://gruntjs.com/creating-plugins
3. Npmjs.org에 있는 플러그인만 사용해야 하나요?
https://github.com/isaacs/npmjs.org