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
참고로 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"
}
}
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
'개발' 카테고리의 다른 글
MEAN stack AWS 우분투 / Mac 설치 방법 (2) | 2017.02.11 |
---|---|
AWS 에서 Ubuntu (우분투) Linux 인스턴스 띄우기 (0) | 2017.01.25 |
Grunt 설치 및 셋팅 (0) | 2016.08.18 |
Node.js 설치 및 셋팅, npm 이란? (0) | 2016.08.18 |
웹개발, 웹디자인 방법 (0) | 2016.08.12 |
웹개발 관련 툴 모음 (0) | 2016.08.12 |
CSS 문법 정리 (0) | 2016.08.11 |
CentOS 사용팁 (0) | 2016.08.09 |
Apache MySql PHP 윈도우 설치 따라하기 (0) | 2016.06.26 |
해쉬맵(hashmap) 설명 정리 (0) | 2016.06.26 |