Grunt는 무엇인가?
Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다.
Grunt 설치
1. Node.js & npm설치 확인
기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..
만약 설치가 안되어 있다면 아래 링크로 이동해서 설치
2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란?
2. CLI (command line interface) 인스톨
npm install -g grunt-cli 를 커맨드창에 입력
C:\Users\Jason>npm install -g grunt-cli
C:\Users\Jason\AppData\Roaming\npm\grunt -> C:\Users\Jason\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
C:\Users\Jason\AppData\Roaming\npm
`-- grunt-cli@1.2.0
+-- findup-sync@0.3.0
| `-- glob@5.0.15
| +-- inflight@1.0.5
| | `-- wrappy@1.0.2
| +-- inherits@2.0.1
| +-- minimatch@3.0.3
| | `-- brace-expansion@1.1.6
| | +-- balanced-match@0.4.2
| | `-- concat-map@0.0.1
| +-- once@1.3.3
| `-- path-is-absolute@1.0.0
+-- grunt-known-options@1.1.0
+-- nopt@3.0.6
| `-- abbrev@1.0.9
`-- resolve@1.1.7
C:\Users\Jason>
참고로 cli는 향후 매번 grunt가 실행될 때, 로컬에 저장된 Grunt가 발견되면 CLI는 Grunt 의 라이브러리들과 Gruntfile로부터의 설정 정보를 가져와 요청한 task를 실행한다. (grunt-cli code )
3. Grunt 프로젝트 시작하기
3-1. package.json 생성
필요한 grunt와 grunt 플러그인들의 정보를 가지고 있는 파일
예제)
{
"name": "reponsive-images",
"version": "0.1.0",
"repository": {
"type": "git",
"url": "https://github.com/udacity/responsive-images.git"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-mkdir": "~0.1.2"
},
"dependencies": {
"grunt-responsive-images": "^0.1.6"
}
}
3-2. Gruntfile.js or Gruntfile.coffee 파일 생성
이 파일은 task를 정의하거나 Grunt 플러그인들은 로드한다.
예제)
module.exports = function(grunt) {
grunt.initConfig({
responsive_images: {
dev: {
options: {
engine: 'im',
sizes: [{
name: 'small',
width: '30%',
suffix: '_small',
quality: 20
},{
name: 'large',
width: '50%',
suffix: '_large',
quality: 40
}]
},
/*
You don't need to change this part if you don't change
the directory structure.
*/
files: [{
expand: true,
src: ['*.{gif,jpg,png}'],
cwd: 'images_src/',
dest: 'images/'
}]
}
},
/* Clear out the images directory if it exists */
clean: {
dev: {
src: ['images'],
},
},
/* Generate the images directory if it is missing */
mkdir: {
dev: {
options: {
create: ['images']
},
},
},
/* Copy the "fixed" images that don't go through processing into the images/directory */
copy: {
dev: {
files: [{
expand: true,
src: 'images_src/fixed/*.{gif,jpg,png}',
dest: 'images/'
}]
},
},
});
grunt.loadNpmTasks('grunt-responsive-images');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-mkdir');
grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);
};
4. Grunt와 grunt 플러그인 설치
예제)
npm install grunt --save-dev <- grunt 의 최신버전을 설치
npm install grunt-responsive-images --save-dev <- grunt-responsive-images grunt의 반응형 이미지 플러그인 설치
5. 커맨드창에 grunt를 입력하면 실행 됨
참고)
1. http://gruntjs.com/getting-started
2. Udacity Front-End Web Developer Nanodegree