SlideShare a Scribd company logo
How to Grunt 
sunghyunzz 
2014.12.12 
@rainist
“dependencies”: { 
“npm”: “^2.1.11” 
} 
*본 슬라이드에서는 npm에 대한 설명이 없습니다. 
npm에 대한 설명은 링크를 참고해주세요. (http:// 
goo.gl/MR63Kc)
Grunt is a task-based 
command line build tool for 
JavaScript projects.
Grunt is a task-based 
command line build tool for 
JavaScript projects.
$ npm install -g grunt-cli
$ npm install grunt --save-dev
Gruntfile.js 
Grunt가 처리할 수 있는 동작들을 정의한다. Grunt 
사용을 위한 설정 파일.
$ vim Gruntfile.js 
*프로젝트 폴더의 root 경로 (package.json과 같은 
위치)에 Gruntfile.js를 생성해주세요.
module.exports = function(grunt) { 
// project에 대한 설정 (grunt task, package 설정 등) 
grunt.config.init({ 
}); 
};
module.exports = function(grunt) { 
// project에 대한 설정 (grunt task, package 설정 등) 
grunt.config.init({ 
// project의 meta data(name, version 등)를 읽는다. 
pkg: grunt.file.readJSON('package.json') 
}); 
};
$ npm install grunt-contrib-uglify --save-dev 
* js를 uglify(compress, 압축) 하는 grunt task를 
제공하는 플러그인
module.exports = function(grunt) { 
// project에 대한 설정 (grunt task, package 설정 등) 
grunt.config.init({ 
// project의 meta data(name, version 등)를 읽는다. 
pkg: grunt.file.readJSON('package.json'), 
uglify: { 
options: { 
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) 
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' 
}, 
build: { 
// template을 통해 pkg의 정보를 활용할 수 있다. 
src: 'src/<%= pkg.name %>.js', 
dest: 'build/<%= pkg.name %>.min.js' 
} 
} 
}); 
// uglify task를 지원하는 플러그인을 불러온다. 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. 
grunt.registerTask('default', ['uglify']); 
};
$ grunt 
*grunt [task]로 grunt를 실행시킨다. task를 따로 
지정하지 않으면 default로 등록된 task가 실행된다.
/*! rainist-grunt 2014-12-12 */ 
var a=10,b=20,c=a+b;console.log(a+b+c); 
rainist-grunt/build/rainist-grunt.min.js
$ npm install grunt-contrib-concat --save-dev 
* 여러 js 파일들을 모두 하나로 모아주는 grunt task 
를 제공하는 플러그인
module.exports = function(grunt) { 
// project에 대한 설정 (grunt task, package 설정 등) 
grunt.config.init({ 
// project의 meta data(name, version 등)를 읽는다. 
pkg: grunt.file.readJSON('package.json'), 
concat: { 
options: { 
separator: ';' 
}, 
dist: { 
src: ['src/tttt.js', 'src/tttt2.js'], 
dest: 'build/<%= pkg.name %>.js' 
} 
}, 
uglify: { 
options: { 
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) 
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' 
}, 
build: { 
// template을 통해 pkg의 정보를 활용할 수 있다. 
src: '<%= concat.dist.dest %>', 
dest: 'build/<%= pkg.name %>.min.js' 
} 
} 
}); 
// uglify task를 지원하는 플러그인을 불러온다. 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-concat'); 
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. 
grunt.registerTask('default', ['concat', 'uglify']); 
};
$ npm install grunt-contrib-watch --save-dev 
* 원하는 파일이 변경 되었을 때, 등록된 task를 자 
동으로 실행시키는 task를 제공하는 플러그인
module.exports = function(grunt) { 
// project에 대한 설정 (grunt task, package 설정 등) 
grunt.config.init({ 
// project의 meta data(name, version 등)를 읽는다. 
pkg: grunt.file.readJSON('package.json'), 
concat: { 
options: { 
separator: ';' 
}, 
dist: { 
src: ['src/*.js'], 
dest: 'build/<%= pkg.name %>.js' 
} 
}, 
uglify: { 
options: { 
// 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) 
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' 
}, 
build: { 
// template을 통해 pkg의 정보를 활용할 수 있다. 
src: '<%= concat.dist.dest %>', 
dest: 'build/<%= pkg.name %>.min.js' 
} 
}, 
watch: { 
files: ['<%= concat.dist.src %>'], 
tasks: ['concat', 'uglify'] 
} 
}); 
// uglify task를 지원하는 플러그인을 불러온다. 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-concat'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
// grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. 
grunt.registerTask('default', ['watch']); 
};
$ npm install grunt-contrib-jshint --save-dev 
* js 코드 품질 관리를 도와주는 js hint를 실행시키 
는 task를 제공하는 플러그인
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
jshint: { 
files: ['Gruntfile.js', 'src/*.js'], 
options: { 
globals: { 
jQuery: true 
} 
} 
}, 
watch: { 
files: ['<%= jshint.files %>'], 
tasks: ['jshint'] 
} 
}); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-jshint'); 
grunt.registerTask('default', ['watch']); 
};
$ npm install grunt-contrib-cssmin --save-dev 
* 여러 css를 하나로 모은 후 uglify하는 task를 제공 
하는 플러그인
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
cssmin: { 
combine: { 
files: { 
'build/<%= pkg.name %>.min.css': ['css/*.css'] 
} 
} 
}, 
watch: { 
files: ['css/*.css'], 
tasks: ['cssmin'] 
} 
}); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-cssmin'); 
grunt.registerTask('default', ['watch']); 
};
$ npm install grunt-contrib-sass --save-dev 
* sass, scss 파일을 css로 변환하는 작업(sass)을 하 
는 task를 제공하는 플러그인
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
sass: { 
dist: { 
options: { 
style: 'expanded' 
}, 
files: { 
'css/style.css' : 'sass/style.sass', 
'css/main.css' : 'sass/main.scss' 
} 
} 
}, 
cssmin: { 
combine: { 
files: { 
'build/<%= pkg.name %>.min.css': ['css/*.css'] 
} 
} 
}, 
watch: { 
files: ['sass/*.sass', 'sass/*.scss'], 
tasks: ['sass', 'cssmin'] 
} 
}); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-sass'); 
grunt.loadNpmTasks('grunt-contrib-cssmin'); 
grunt.registerTask('default', ['watch']); 
};
$ npm install grunt-uncss --save-dev 
* 사용하지 않는 css selector는 모두 제외시켜 주는 
task를 제공하는 플러그인 (python template류와 호환되지 않음)
지정한 html 파일에서 불러오는 모든 css와 실제로 사용되는 
css selector를 비교하여 최적화에 도움을 준다.
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
uncss: { 
dist: { 
files: { 
'build/result.css': [ 
'apps/templates/**/*.html', 
‘apps/templates/*.html' 
] 
} 
} 
} 
}); 
grunt.loadNpmTasks('grunt-uncss'); 
grunt.registerTask('default', ['uncss']); 
};
$ npm install grunt-contrib-imagemin —-save-dev 
$ npm install grunt-imageoptim --save-dev 
* 두 플러그인 모두 이미지 사이즈를 줄여주는 task를 제공한다. 
imageoptim의 경우 OS X만 지원한다(Mac의 앱에 의존하기 때문이 
다). 둘의 비교는 http://goo.gl/jSX92Z를 참고하면 된다.
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
imageoptim: { 
dist: { 
src: ['apps/static/images/**'] 
} 
} 
}); 
grunt.loadNpmTasks('grunt-imageoptim'); 
grunt.registerTask('image', ['imageoptim']); 
};
$ npm install grunt-open --save-dev 
* 지정한 url 혹은 파일을 브라우져에 여는 task를 
제공하는 플러그인 (여러 task를 모두 마친 후, 자동으로 브라우 
져를 열기 때문에 은근 유용하다)
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
cssmin: { 
combine: { 
files: { 
'apps/static/style.min.css': [ 
‘components/css/*.css', 
‘components/js/woothemes-FlexSlider-06b12f8/*.css', 
‘components/js/prettyPhoto_3.1.5/*.css' 
] 
} 
} 
}, 
open: { 
dev: { 
path: 'http://127.0.0.1:5000', 
app: 'Google Chrome' 
} 
} 
}); 
grunt.loadNpmTasks('grunt-contrib-cssmin'); 
grunt.loadNpmTasks('grunt-open'); 
grunt.registerTask('default', [‘cssmin:combine’, 'open']); 
};
$ npm install grunt-newer --save-dev 
* 기존의 파일이 바꼈을 경우에만 실행되도록 설정 
할 수 있다. 따로 설정할 필요가 없다. (option을 이 
용하면 캐시도 가능)
module.exports = function(grunt) { 
grunt.config.init({ 
pkg: grunt.file.readJSON('package.json'), 
cssmin: { 
combine: { 
files: { 
'apps/static/style.min.css': [ 
‘components/css/*.css', 
‘components/js/woothemes-FlexSlider-06b12f8/*.css', 
‘components/js/prettyPhoto_3.1.5/*.css' 
] 
} 
} 
}, 
open: { 
dev: { 
path: 'http://127.0.0.1:5000', 
app: 'Google Chrome' 
} 
} 
}); 
grunt.loadNpmTasks('grunt-contrib-cssmin'); 
grunt.loadNpmTasks('grunt-open'); 
grunt.loadNpmTasks(‘grunt-newer'); 
grunt.registerTask('default', [‘newer:cssmin:combine’, 'open']); 
};
그 외에 알아두면 좋은 플러그인들 
$ npm install grunt-requirejs --save-dev 
$ npm install grunt-contrib-htmlmin --save-dev 
$ npm install grunt-inline-css --save-dev 
$ npm install grunt-react --save-dev 
$ npm install grunt-ngmin --save-dev 
$ npm install grunt-concurrent --save-dev
Rainist, For Making a Better Decision 
http://www.rainist.com

More Related Content

What's hot

Vuejs 시작하기
Vuejs 시작하기Vuejs 시작하기
Vuejs 시작하기
성일 한
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
Jin wook
 
Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs
근호 최
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
수정 김
 
Spring Boot 2
Spring Boot 2Spring Boot 2
Spring Boot 2
경륜 이
 
막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js
연웅 조
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료
shanka2
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
기동 이
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
연웅 조
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
jungkees
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
KTH, 케이티하이텔
 
20131217 html5
20131217 html520131217 html5
20131217 html5
DK Lee
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정
leejungwang
 
Python server-101
Python server-101Python server-101
Python server-101
Huey Park
 
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
승엽 신
 
Node.js at OKJSP
Node.js at OKJSPNode.js at OKJSP
Node.js at OKJSP
JeongHun Byeon
 
[NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 [NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기
YoungSu Son
 
spring.io를 통해 배우는 spring 개발사례
spring.io를 통해 배우는 spring 개발사례spring.io를 통해 배우는 spring 개발사례
spring.io를 통해 배우는 spring 개발사례
Daehwan Lee
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
Huey Park
 

What's hot (20)

Vuejs 시작하기
Vuejs 시작하기Vuejs 시작하기
Vuejs 시작하기
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
 
Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
 
Spring Boot 2
Spring Boot 2Spring Boot 2
Spring Boot 2
 
막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js막하는 스터디 첫 번째 만남 Node.js
막하는 스터디 첫 번째 만남 Node.js
 
Nodejs 발표자료
Nodejs 발표자료Nodejs 발표자료
Nodejs 발표자료
 
Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정
 
Python server-101
Python server-101Python server-101
Python server-101
 
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
Vagrant를 이용한 개발환경 구축과 NetBeans를 이용한 C/C++개발과 리모트 디버깅
 
Node.js at OKJSP
Node.js at OKJSPNode.js at OKJSP
Node.js at OKJSP
 
[NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 [NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기
 
spring.io를 통해 배우는 spring 개발사례
spring.io를 통해 배우는 spring 개발사례spring.io를 통해 배우는 spring 개발사례
spring.io를 통해 배우는 spring 개발사례
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 

Viewers also liked

최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
Hyeonjin Cho
 
혼자서 프로젝트 수행하기
혼자서 프로젝트 수행하기혼자서 프로젝트 수행하기
혼자서 프로젝트 수행하기
JeongHun Byeon
 
Node.js 기본
Node.js 기본Node.js 기본
Node.js 기본
Han Jung Hyun
 
기술적 변화를 이끌어가기
기술적 변화를 이끌어가기기술적 변화를 이끌어가기
기술적 변화를 이끌어가기
Jaewoo Ahn
 
프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들
Eun Cho
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
Taegon Kim
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
지수 윤
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
Goonoo Kim
 
Gruntjs
GruntjsGruntjs
Gruntjs
Chan-uk Son
 
헨릭빕스코브
헨릭빕스코브헨릭빕스코브
헨릭빕스코브Younseok Seo
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설Toby Yun
 
Grunt.js Review
Grunt.js ReviewGrunt.js Review
Grunt.js Review
Han Jung Hyun
 
마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유
Woo Sanghun
 
Yeoman
YeomanYeoman
Yeoman
ymtech
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
JinKwon Lee
 
jQuery angular, React.js 로 댓글달아보기 공부했던 기록
jQuery angular, React.js 로 댓글달아보기 공부했던 기록jQuery angular, React.js 로 댓글달아보기 공부했던 기록
jQuery angular, React.js 로 댓글달아보기 공부했던 기록
라한사 아
 
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
keesung kim
 
[Msd09]mobile ui design
[Msd09]mobile ui design[Msd09]mobile ui design
[Msd09]mobile ui design
JY LEE
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
Michael Yang
 

Viewers also liked (20)

최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
 
혼자서 프로젝트 수행하기
혼자서 프로젝트 수행하기혼자서 프로젝트 수행하기
혼자서 프로젝트 수행하기
 
Node.js 기본
Node.js 기본Node.js 기본
Node.js 기본
 
기술적 변화를 이끌어가기
기술적 변화를 이끌어가기기술적 변화를 이끌어가기
기술적 변화를 이끌어가기
 
프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
 
Gruntjs
GruntjsGruntjs
Gruntjs
 
헨릭빕스코브
헨릭빕스코브헨릭빕스코브
헨릭빕스코브
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설
 
Grunt.js Review
Grunt.js ReviewGrunt.js Review
Grunt.js Review
 
마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유마크업개발자가 UX를 알아야 하는 이유
마크업개발자가 UX를 알아야 하는 이유
 
Yeoman
YeomanYeoman
Yeoman
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
 
jQuery angular, React.js 로 댓글달아보기 공부했던 기록
jQuery angular, React.js 로 댓글달아보기 공부했던 기록jQuery angular, React.js 로 댓글달아보기 공부했던 기록
jQuery angular, React.js 로 댓글달아보기 공부했던 기록
 
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
 
[Msd09]mobile ui design
[Msd09]mobile ui design[Msd09]mobile ui design
[Msd09]mobile ui design
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
 

Similar to How to Grunt.js

Grunt
GruntGrunt
Grunt
Dohoon Kim
 
Grunt 사용법 간단정리
Grunt 사용법 간단정리Grunt 사용법 간단정리
Grunt 사용법 간단정리
SuHyun Jeon
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
HyungKuIm
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
Circulus
 
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
Ji-Woong Choi
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발지수 윤
 
One-day-codelab
One-day-codelabOne-day-codelab
One-day-codelab
WebFrameworks
 
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
Ji-Woong Choi
 
Introduce Yeoman
Introduce YeomanIntroduce Yeoman
Introduce Yeoman
항희 이
 
mago3d workshop in FOSS4G Korea 2018
mago3d workshop in FOSS4G Korea 2018mago3d workshop in FOSS4G Korea 2018
mago3d workshop in FOSS4G Korea 2018
Gaia3D,Inc.
 
Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축Jaehoon Kim
 
Mago3 d 워크샵
Mago3 d 워크샵Mago3 d 워크샵
Mago3 d 워크샵
정대 천
 
mago3D 기술 워크샵 자료(한국어)
mago3D  기술 워크샵 자료(한국어)mago3D  기술 워크샵 자료(한국어)
mago3D 기술 워크샵 자료(한국어)
SANGHEE SHIN
 
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
Ji-Woong Choi
 
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Html5+js with game engine   cocos2d-html5 분석 @KGC2012Html5+js with game engine   cocos2d-html5 분석 @KGC2012
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Chanho Song
 
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
WSConf.
 
Vue.js 기초 실습.pptx
Vue.js 기초 실습.pptxVue.js 기초 실습.pptx
Vue.js 기초 실습.pptx
wonyong hwang
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
Jae Sung Park
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
Park Jonggun
 

Similar to How to Grunt.js (20)

Grunt
GruntGrunt
Grunt
 
Grunt 사용법 간단정리
Grunt 사용법 간단정리Grunt 사용법 간단정리
Grunt 사용법 간단정리
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
 
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
[오픈소스컨설팅]Gradle Basic - How to use Gradle in Java Project
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 
One-day-codelab
One-day-codelabOne-day-codelab
One-day-codelab
 
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
[오픈소스컨설팅]Nginx 1.2.7 설치가이드__v1
 
Introduce Yeoman
Introduce YeomanIntroduce Yeoman
Introduce Yeoman
 
mago3d workshop in FOSS4G Korea 2018
mago3d workshop in FOSS4G Korea 2018mago3d workshop in FOSS4G Korea 2018
mago3d workshop in FOSS4G Korea 2018
 
Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축Windows에서 go+eclipse 개발환경 구축
Windows에서 go+eclipse 개발환경 구축
 
Mago3 d 워크샵
Mago3 d 워크샵Mago3 d 워크샵
Mago3 d 워크샵
 
mago3D 기술 워크샵 자료(한국어)
mago3D  기술 워크샵 자료(한국어)mago3D  기술 워크샵 자료(한국어)
mago3D 기술 워크샵 자료(한국어)
 
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
[오픈소스컨설팅] Docker를 활용한 Gitlab CI/CD 구성 테스트
 
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Html5+js with game engine   cocos2d-html5 분석 @KGC2012Html5+js with game engine   cocos2d-html5 분석 @KGC2012
Html5+js with game engine cocos2d-html5 분석 @KGC2012
 
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
 
Nodejs express
Nodejs expressNodejs express
Nodejs express
 
Vue.js 기초 실습.pptx
Vue.js 기초 실습.pptxVue.js 기초 실습.pptx
Vue.js 기초 실습.pptx
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
 

How to Grunt.js

  • 1. How to Grunt sunghyunzz 2014.12.12 @rainist
  • 2. “dependencies”: { “npm”: “^2.1.11” } *본 슬라이드에서는 npm에 대한 설명이 없습니다. npm에 대한 설명은 링크를 참고해주세요. (http:// goo.gl/MR63Kc)
  • 3. Grunt is a task-based command line build tool for JavaScript projects.
  • 4. Grunt is a task-based command line build tool for JavaScript projects.
  • 5. $ npm install -g grunt-cli
  • 6. $ npm install grunt --save-dev
  • 7. Gruntfile.js Grunt가 처리할 수 있는 동작들을 정의한다. Grunt 사용을 위한 설정 파일.
  • 8. $ vim Gruntfile.js *프로젝트 폴더의 root 경로 (package.json과 같은 위치)에 Gruntfile.js를 생성해주세요.
  • 9. module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ }); };
  • 10. module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ // project의 meta data(name, version 등)를 읽는다. pkg: grunt.file.readJSON('package.json') }); };
  • 11. $ npm install grunt-contrib-uglify --save-dev * js를 uglify(compress, 압축) 하는 grunt task를 제공하는 플러그인
  • 12. module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ // project의 meta data(name, version 등)를 읽는다. pkg: grunt.file.readJSON('package.json'), uglify: { options: { // 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' }, build: { // template을 통해 pkg의 정보를 활용할 수 있다. src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // uglify task를 지원하는 플러그인을 불러온다. grunt.loadNpmTasks('grunt-contrib-uglify'); // grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. grunt.registerTask('default', ['uglify']); };
  • 13. $ grunt *grunt [task]로 grunt를 실행시킨다. task를 따로 지정하지 않으면 default로 등록된 task가 실행된다.
  • 14. /*! rainist-grunt 2014-12-12 */ var a=10,b=20,c=a+b;console.log(a+b+c); rainist-grunt/build/rainist-grunt.min.js
  • 15. $ npm install grunt-contrib-concat --save-dev * 여러 js 파일들을 모두 하나로 모아주는 grunt task 를 제공하는 플러그인
  • 16. module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ // project의 meta data(name, version 등)를 읽는다. pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/tttt.js', 'src/tttt2.js'], dest: 'build/<%= pkg.name %>.js' } }, uglify: { options: { // 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' }, build: { // template을 통해 pkg의 정보를 활용할 수 있다. src: '<%= concat.dist.dest %>', dest: 'build/<%= pkg.name %>.min.js' } } }); // uglify task를 지원하는 플러그인을 불러온다. grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. grunt.registerTask('default', ['concat', 'uglify']); };
  • 17. $ npm install grunt-contrib-watch --save-dev * 원하는 파일이 변경 되었을 때, 등록된 task를 자 동으로 실행시키는 task를 제공하는 플러그인
  • 18. module.exports = function(grunt) { // project에 대한 설정 (grunt task, package 설정 등) grunt.config.init({ // project의 meta data(name, version 등)를 읽는다. pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/*.js'], dest: 'build/<%= pkg.name %>.js' } }, uglify: { options: { // 결과(dest) 파일에 지정한 배너를 삽입한다. (상단의 주석이라 생각하면 된다) banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' }, build: { // template을 통해 pkg의 정보를 활용할 수 있다. src: '<%= concat.dist.dest %>', dest: 'build/<%= pkg.name %>.min.js' } }, watch: { files: ['<%= concat.dist.src %>'], tasks: ['concat', 'uglify'] } }); // uglify task를 지원하는 플러그인을 불러온다. grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-watch'); // grunt.config.init에서 설정한 uglify task를 기본 task로 등록한다. grunt.registerTask('default', ['watch']); };
  • 19. $ npm install grunt-contrib-jshint --save-dev * js 코드 품질 관리를 도와주는 js hint를 실행시키 는 task를 제공하는 플러그인
  • 20. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), jshint: { files: ['Gruntfile.js', 'src/*.js'], options: { globals: { jQuery: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['watch']); };
  • 21. $ npm install grunt-contrib-cssmin --save-dev * 여러 css를 하나로 모은 후 uglify하는 task를 제공 하는 플러그인
  • 22. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), cssmin: { combine: { files: { 'build/<%= pkg.name %>.min.css': ['css/*.css'] } } }, watch: { files: ['css/*.css'], tasks: ['cssmin'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask('default', ['watch']); };
  • 23. $ npm install grunt-contrib-sass --save-dev * sass, scss 파일을 css로 변환하는 작업(sass)을 하 는 task를 제공하는 플러그인
  • 24. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { options: { style: 'expanded' }, files: { 'css/style.css' : 'sass/style.sass', 'css/main.css' : 'sass/main.scss' } } }, cssmin: { combine: { files: { 'build/<%= pkg.name %>.min.css': ['css/*.css'] } } }, watch: { files: ['sass/*.sass', 'sass/*.scss'], tasks: ['sass', 'cssmin'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask('default', ['watch']); };
  • 25. $ npm install grunt-uncss --save-dev * 사용하지 않는 css selector는 모두 제외시켜 주는 task를 제공하는 플러그인 (python template류와 호환되지 않음)
  • 26. 지정한 html 파일에서 불러오는 모든 css와 실제로 사용되는 css selector를 비교하여 최적화에 도움을 준다.
  • 27. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), uncss: { dist: { files: { 'build/result.css': [ 'apps/templates/**/*.html', ‘apps/templates/*.html' ] } } } }); grunt.loadNpmTasks('grunt-uncss'); grunt.registerTask('default', ['uncss']); };
  • 28. $ npm install grunt-contrib-imagemin —-save-dev $ npm install grunt-imageoptim --save-dev * 두 플러그인 모두 이미지 사이즈를 줄여주는 task를 제공한다. imageoptim의 경우 OS X만 지원한다(Mac의 앱에 의존하기 때문이 다). 둘의 비교는 http://goo.gl/jSX92Z를 참고하면 된다.
  • 29. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), imageoptim: { dist: { src: ['apps/static/images/**'] } } }); grunt.loadNpmTasks('grunt-imageoptim'); grunt.registerTask('image', ['imageoptim']); };
  • 30. $ npm install grunt-open --save-dev * 지정한 url 혹은 파일을 브라우져에 여는 task를 제공하는 플러그인 (여러 task를 모두 마친 후, 자동으로 브라우 져를 열기 때문에 은근 유용하다)
  • 31. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), cssmin: { combine: { files: { 'apps/static/style.min.css': [ ‘components/css/*.css', ‘components/js/woothemes-FlexSlider-06b12f8/*.css', ‘components/js/prettyPhoto_3.1.5/*.css' ] } } }, open: { dev: { path: 'http://127.0.0.1:5000', app: 'Google Chrome' } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-open'); grunt.registerTask('default', [‘cssmin:combine’, 'open']); };
  • 32. $ npm install grunt-newer --save-dev * 기존의 파일이 바꼈을 경우에만 실행되도록 설정 할 수 있다. 따로 설정할 필요가 없다. (option을 이 용하면 캐시도 가능)
  • 33. module.exports = function(grunt) { grunt.config.init({ pkg: grunt.file.readJSON('package.json'), cssmin: { combine: { files: { 'apps/static/style.min.css': [ ‘components/css/*.css', ‘components/js/woothemes-FlexSlider-06b12f8/*.css', ‘components/js/prettyPhoto_3.1.5/*.css' ] } } }, open: { dev: { path: 'http://127.0.0.1:5000', app: 'Google Chrome' } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-open'); grunt.loadNpmTasks(‘grunt-newer'); grunt.registerTask('default', [‘newer:cssmin:combine’, 'open']); };
  • 34. 그 외에 알아두면 좋은 플러그인들 $ npm install grunt-requirejs --save-dev $ npm install grunt-contrib-htmlmin --save-dev $ npm install grunt-inline-css --save-dev $ npm install grunt-react --save-dev $ npm install grunt-ngmin --save-dev $ npm install grunt-concurrent --save-dev
  • 35. Rainist, For Making a Better Decision http://www.rainist.com