Grunt에 대한 설명과 사용법에 대한 내용입니다. 개인적인 학습을 위해 정리하였습니다.

2. Grunt 란?

3. 사전적의미
1. Grunt 란?

4. 자바스크립트 프로젝트를 위한 task 기반의 커맨드 라인 빌드 툴
1. Grunt 란?
1)
task란 사용자가 정의한 모든 단위의 작업을 뜻함2)
js 파일들 합치기, js 파일 압축하기, css 파일 압축하기,
이미지 최적화 시키기 등
ex)
포토샵의 action으로 생각하면 됩니다. 포토샵에서 반복작업(크기
변경->자르기->저장)등을 action에 지정하고 자동화 시키는 것과
같습니다.
3)

5. Grunt를 왜 사용하는가?

6. Grunt의 사용 목적은 자동화를 위해서 입니다.
우리가 해야할 반복 작업을 줄여줍니다.
2. Grunt를 왜 사용하는가?
minification, compilation, unit testing, linting 등의 작업이 여기에
속합니다.
일단 설정을 하고 나면, Task Runner가 우리들의 작업을 대신 해줍니다.

7. Grunt 사용방법

8. 1) nodeJS 설치
3. Grunt 사용방법
http://nodejs.org

9. 2) Grunt CLI(Commend Line Interface) 설치
3. Grunt 사용방법
설치는 npm(Node Packaged Modules)을 통해서 할 수 있습니다. 다음과 같은
명령어를 입력합니다. 여기서 –g는 글로벌을 뜻하며 grunt-cli를 콘솔 어디서나
사용할 수 있습니다.
> npm install -g grunt-cli
3) Grunt 설치
프로젝트 폴더의 root경로에서 grunt를 설치합니다. --save-dev로 설치
를 진행하면 grunt 설치와 동시에 다음단계에서 생성할 package.json
파일과 연동시켜주며, 파일 내부의 devDependencies항목에 설치 대상
(여기서는 grunt)을 자동으로 추가해 줍니다.
> npm install grunt --save-dev

10. 4) package.json 생성
3. Grunt 사용방법
아래의 command line 을 통해 package.json 파일이 생성됨을 확인 합니다. 과
정중에 특별히 기재할 사항이 없다면 계속 enter를 쳐서 넘겨도 무방합니다. (자
동적으로 해당 프로젝트의 정보를 입력해줌)
> npm init
package.json
{
"name": "grunt",
"version": "0.0.0",
"main": "index.js",
"dependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-uglify": "^0.8.0"
},
"devDependencies": {
"grunt-contrib-concat": "^0.5.1“ // grunt가 최신 버전으로 설치됨을 확인
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

11. 5) Gruntfile.js 생성
3. Grunt 사용방법
package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js를 생성합
니다. 이 파일에서 task를 관리 할 수 있습니다.
module.exports = function(grunt) {
grunt.initConfig({
});
grunt.registerTask(‘default', []);
}
6) 실행
아래의 커맨드로 실행시켜 서 Done, without errors. 라는 문자열이 보이면 성
공 입니다.
> grunt

12. 자주사용하는 플러그인

13. 1) grunt-contrib-concat
4. 자주사용하는 플러그인
grunt-contrib-concat은 여러 파일(js, css등)을 하나로 합쳐주는 모듈입니다.
> npm install grunt-contrib-concat --save
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({
concat: {
dev: {
src: ['js/src/*.js'],
dest: 'js/application.js'
}
}
});
grunt.registerTask(‘dev', ['concat:dev']);
}
> grunt dev

14. 2) Uglify
4. 자주사용하는 플러그인
grunt-contrib-uglify은 JS를 압축해주는 모듈입니다.
> npm install grunt-contrib-uglify --save-dev
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
uglify:{
options: {
mangle:true, // 변수명과 함수명의 변형을 막는다
compress:{
drop_console:false // 출력문 제거
},
beautify:false, // 코드의 syntax 유지
preserveComments : false // 모든 주석 제거
}
dist: {
src:'js/applications.js',
dest:'asset/js/app.min.js'
}
}
});
grunt.registerTask('default', ['uglify:dist']);
}

15. 3) cssmin
4. 자주사용하는 플러그인
grunt-contrib-cssmin은 css를 압축해주는 모듈입니다.
> npm install grunt-contrib-cssmin --save-dev
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-cssmin ');
grunt.initConfig({
cssmin:{
minify: {
expand:true,
cwd:"css", // 압축할 파일이 들어있는 경로
src:['*.css'], // 압축할 파일들
dest:'asset/css', // 압축완료된 파일이 들어갈 경로
ext:'.min.css‘ // 압축완료된 파일의 확장자
}
}
});
grunt.registerTask('default', [‘cssmin']);
}

16. 그 외의 플러그인

17. 5. 그 외의 플러그인
그 외에도 많이 사용하는 플러그인들은 아래와 같습니다.
http://gruntjs.com/plugins
contrib-watch : 실시간으로 코드와 브라우져를 동기화 시켜주는 모듈
contrib-clean : 필요없는 폴더와 파일을 삭제하는 모듈
contrib-sass : sass를 빌드해주는 모듈
contrib-less : less를 빌드해주는 모듈
contrib-imagemin : 이미지 최적화 모듈
contrib-jshint : 자바스크립트의 오류를 잡아주는 모듈
다른 플러그인들을 사용하고 싶다면 아래 주소에서 검색해서 필요한 플러그인을
사용하면 됩니다.