grunt는 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 빌드 툴이라는 뜻이다.
npm을 통해서 설치할수 있습니다. node.js가 설치되어있어야 합니다.
1.설치
npm install -g grunt-cli
grunt Command List Interface(CLI)를 설치한다.
npm init
package.json파일을 생성합니다.
npm install grunt --save-dev
grunt 을 설치 합니다. –save-dev option : pachage.json파일에 grunt devDependencies를 추가합니다.
2.사용법
module.exports = function(grunt) {
// task 설정
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'static/js/app.js',
dest: 'dist/js/app.min.js'
}
}
});
// 플러그인 등록
grunt.loadNpmTasks('grunt-contrib-uglify');
// default task등록
grunt.registerTask('default', ['uglify']);
//uglify task등록
grunt.registerTask('uglify', ['uglify']);
};
위 내용을 Gruntfile.js를 작성한다.
npm install grunt-contrib-uglify --save-dev
grunt-contrib-uglify plugin을 설정한다.
grunt Running "uglify:build" (uglify) task >> 1 file created. Done, without errors.
에러가 없이 성공한 모습을 볼수 있다.
3.grunt plugin
grunt plugin 종류 및 사용법 http://gruntjs.com/plugins
grunt-contrib 종류 및 사용법 https://github.com/gruntjs/grunt-contrib
3-1.grunt-contrib-connect
간단한 설정만으로 웹서버를 띠울수 있다.
npm install grunt-contrib-connect --save-dev
module.exports = function(grunt) {
// 작업을 위한 설정
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect : {
dev:{}
,local:{
option : {port : 8001 ,base : 'dist'}
}
}
});
// 플러그인 등록
grunt.loadNpmTasks('grunt-contrib-connect');
//keepalive grunt가 종료된후에도 웹서버가 종료되지 않는다.
grunt.registerTask('conn', ['connect:dev:keepalive']);
};
D:\node_workspace\sample>grunt conn Running "connect:dev" (connect) task Started connect web server on http://localhost:8000 Done, without errors.
웹서버가 구동된것을 확인할 수 있다.
3-2.grunt-contrib-watch
파일이 변화가 일어나면 감지하여 자동으로 처리해주는 플러그인이다.
npm install grunt-contrib-watch --save-dev
module.exports = function(grunt) {
// 작업을 위한 설정
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect : {
dev:{},
local:{
options : {port : 8001 ,base : 'dist'}
}
},watch:{
html: {
files:'dist/*.html',
options:{livereload:true} //브라우저에서 자동으로 리로드가 되게 한다
}
}
});
// 플러그인 등록
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
//keepalive grunt가 종료된후에도 웹서버가 종료되지 않는다.
grunt.registerTask('conn', ['connect:dev:keepalive']);
//watch는 grunt작업을 종료시키지 않기 때문에 keepalive 제거
grunt.registerTask('conn_watch', ['connect:local' , 'watch:html']);
};
D:\node_workspace\sample2>grunt conn Running "connect:dev:keepalive" (connect) task Waiting forever... Started connect web server on http://localhost:8000 D:\node_workspace\sample2>grunt conn_watch Running "connect:local" (connect) task Started connect web server on http://localhost:8001 Running "watch:html" (watch) task Waiting...