Grunt
| The JavaScript Task Runner
프로젝트 자동화를
도와주는 패키지 관리자
-> 프로젝트 관련 내용을 모두 모니터함
Grunt (그런트) 공식 사이트: http://gruntjs.com/
참고 사이트:
<순서>
0. Node.js 와 Grunt 설치
1. 프로젝트 폴더에 package.json과 Gruntfile.js 생성 (같은 곳에 있어야함)
- package.js 생성방법 1. 직접
만들기, 2. 커맨드라인에서 npm init 사용하기
2. package.json 설정 + 모듈 추가
- 플러그인 설정 (html,
css, javascript, watch 등)
3.Gruntfile.js 설정
< package.json 생성하기 - 1. 파일만들기 >
- package.json 파일은 npm 으로
퍼블리싱할때 사용하는 메타데이터 저장 파일로 모듈에 대한 내용과 프로젝트 환경설정 내용이 있음
실행(윈도우키+R) > cmd 에서
1. 프로젝트 폴더로 이동
- 명령어: cd 프로젝트
폴더명
e.g. cd C:\wamp\www\wordpressandsass
2. 프로젝트 폴더 안에 package.json 만들기
- 명령어: npm init
> 엔터 > package.json 내용 설정 부분이 나옴
e.g. npm init > 엔터 >
name: (wordpressandsass) <엔터>
version: (1.0.0) <엔터>
description: grunt testing <입력 후 엔터>
entry point: (Gruntfile.js) index.html <입력 후 엔터>
test command:<엔터>
git repository:<엔터>
keywords:<엔터>
author: Julyee <입력 후 엔터>
license: (ISC) <엔터>
About to write to C:\wamp\www\wordpressandsass\package.json:
{
"name": "wordpressandsass",
"version": "0.0.0",
"description": "grunt testing",
"main": "index.html",
"scripts": {
"test": "echo
\"Error: no test specified\" && exit 1"
},
"author": "Julyee",
"license": "BSD"
}
Is this ok? (yes) <엔터>
3. package.json 내용 수정
- 방법: 에디터에서
프로젝트 폴더에 생성된 package.json파일을 열어서
scripts부분, license 부분과
마지막 (,)삭제한 후 저장
< package.json 생성하기 - 2. 모듈
추가하기 >
추가할 모듈
1. sass 모듈
2. watch 모듈
실행(윈도우키+R) > cmd 에서
1. package.json 파일에 SASS 모듈 추가하기
- scss 폴더로 이동 > npm
install grunt-contrib-sass --save-dev > 엔터
2. package.json 파일에 watch 모듈 추가하기
- scss 폴더로 이동 > npm
install grunt-contrib-watch --save-dev > 엔터
결과:
- 프로젝트 폴더안에
node_modules 폴더가 생기고
그 안에 grunt,
grunt-contrib-sass, grunt-contrib-watch 폴더가 생성됨
- package.json 으로 가보면 아래 코드가 자동
삽입되어있음
"devDependencies": {
"grunt":
"~1.0.1",
"grunt-contrib-sass":
"~1.0.0"
"grunt-contrib-watch":
"~1.0.0"
}
< Gruntfile.js 설정하기 >
- Gruntfile.js는 grunt가 할일을
지시하는 파일로 할일을 적어주면 됨.
1. 프로젝트 폴더안에 Gruntfile.js 파일생성
-
Gruntfile.js 의 기본 구조
module.exports = function(grunt) {
// 프로젝트 환경설정.
grunt.initConfig({
pkg:
grunt.file.readJSON('package.json'),
// 모듈(플러그인)설정
});
// 플러그인 로드
// Task 실행
};
2. 설치한 모듈(플러그인)에 대한 내용을 확인 후 알맞은
옵션으로 설정한다.
e.g. Sass 와 Watch 설정하기
module.exports = function(grunt) {
// 프로젝트 환경설정.
grunt.initConfig({
pkg:
grunt.file.readJSON('package.json'),
/* Sass
*/
sass: {
dev:{
options: {
style: 'expanded', //사람이 읽을수 있게 해라
sourcemap: 'none', // map 없게
},
files: {
'style.css': 'scss/style.scss' //dev가 정상이면, style.css로 컴파일됨
}
}
},
/*
Watch */
watch:
{
css:{
files: '**/*.scss', //프로젝트 폴더안에 확장자가 .scss 파일을 전부
tasks: ['sass'] // 위의 sass: 부분을 실행한다.
}
}
});
// 플러그인 로드
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-sass');
// Task 실행
grunt.registerTask('default',['watch']); //sass task는 watch 안에 있으므로 생략
};
< Grunt 실행하기 >
실행(윈도우키+R) > cmd > scss폴더로
이동 > grunt > 엔터
- watch가 실행되고 > .css-cache 폴더가 생성됨
- watch 종료 방법: Ctrl+C > y
- watch 종료 방법: Ctrl+C > y
컴파일하기: 에디터에서 SCSS 폴더에 넣어둔 _style.scss파일을 수정하면, 자동적으로 grunt가 컴파일한 후 style.css를 만들어준다.
< Grunt 종료하기 >
Ctrl+C > y
Ctrl+C > y
