-
Grunt 설치 및 셋팅개발 2016.08.18 16:52
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 changethe 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
'개발' 카테고리의 다른 글
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
