1. install NPM
> sudo apt-get install npm
> sudo npm update -g npm
2.install CLI
> sudo npm install -g grunt-cli
3. Create Gruntfile
> npm init # 명령어 실행 후 "package.json" 파일이 생성되고 "name" : "프로젝트명"이 "grunt"일 경우 다른 프로젝트명으로 변경한다.
> npm install grunt --save-dev
> npm install grunt-contrib-concat --save-dev # concat 플러그인 설치 (여러 파일을 하나의 파일로 만들어준다)
> npm install grunt-contrib-watch --save-dev # watch 플러그인 설치(설정된 파일을 모니터링하여 변경사항이 있으면 바로 적용시켜준다)
> touch gruntfile.js
- uglify : JS 파일 병합 및 압축
- concat : JS 파일 병합
- less, sass : less 또는 sass 파일을 css로 변환(?)
- cssmin : css 파일 압축
- imagemin : 이미지 파일 사이즈 감소
4. gruntfile.js Setting
module. exports = function(grunt) {
grunt.initConfig({
concat: {
js: {
src: ['script/js1.js', 'script/js2.js', 'script/js3.js'],
dest: 'dist/js/built.js',
},
css: {
src: ['css/intro.js', 'css/project.js', 'css/outro.js'],
dest: 'dist/css/built.js',
},
},
watch: {
scripts: {
files: ['script/**/*.js'],
tasks: ['concat:js'],
},
css: {
files: ['css/**/*.css'],
tasks: ['concat:css'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'watch']);
}
5. Execute
> grunt {TaskName}
> grunt
- grunt.registerTask()의 첫번째 인자에 'default'로 지정하면 grunt 명령어 실행시 옵션 없이 두번째 인자 배열안의 항목들을 실행할 수 있다.
