앞에 쓰는 말
특히 주의：만약 이 글이 충분히 상세하지 않다고 느껴진다면, 강력히 Grunt 영문 공식 사이트 의 튜토리얼을 보기를 권장합니다. 中文版 는 주석을 부분적으로 번역했는데, 번역하지 않는 것이 낫습니다 (번역에 오해되기 쉽습니다)
- Grunt 란 무엇인가？
Grunt 는 자동 구축 도구로, 유사한 것으로 Ant, Buildy, Gmake 등이 있습니다. 더 많은 정보는 [黯羽轻扬：JS 자동화](/articles/js 자동화/) 를 참조하십시오
- Grunt 의 용도는？
자동 구축 도구는 자동화 도구를 통합하여, 태스크 형식으로 관리할 수 있습니다. 따라서 Grunt 공식 사이트의 서브타이틀은 The JavaScript Task Runner 입니다.
간단히 설명하면, 프로젝트 구축 -> 모듈화 개발 -> 재사용 -> 테스트 -> 디버그 -> 검증 -> 릴리스 -> 버전 관리, 이 전체 플로우에서 많은 자동화 도구가 필요합니다. 예를 들어 Require, QUnit, JSHint, Uglify 등입니다. 거의 매번 소스코드를 수정할 때마다 특정 순서로 몇 가지 도구를 수동으로 다시 실행해야 합니다。。。
Grunt 와 같은 자동 구축 도구가 있으면 다시 실행하는 조작을 간소화할 수 있습니다. 설정 파일을 작성한 후, 커맨드라인에서 커스텀 태스크를 실행하기만 하면 됩니다. 심지어 grunt-contrib-watch 플러그인과 연동하여 파일 수정을 감시하고, 자동으로 태스크를 실행할 수도 있습니다
- Grunt 의 좋은 점은？
-
인기：Twitter, JQuery, Adobe, Mozilla 등이 Grunt 를 사용
-
플러그인이 많음：현재 (2015.5.22) 이미 4560 개의 Grunt 플러그인이 있습니다.常用的인 JSHint, Require, Sass 등을 포함하여, 충분히 사용할 수 있습니다.实在안 되면 직접 플러그인을 작성할 수도 있습니다
-
사용하기 쉬움：설정 파일이 비교적 간단하고, 플러그인 문서가 충실함 (npm 공식 사이트가 통일 관리를 제공)
一.grunt 설치
- NodeJS 설치
Windows 는 직접http://nodejs.org/에서 설치 패키지를 다운로드하면 됩니다. npm 포함
其它 플랫폼의 설치 튜토리얼
설치 후, 커맨드라인에서 node -v 를 입력하여 테스트합니다
- npm 설치
커맨드라인에서 npm -v 를 입력하여 테스트합니다. 오류가 발생하면, 스스로 npm 을 설치하는 방법을 생각합니다
- Grunt-CLI(커맨드라인 도구 Command Line Interface) 설치
커맨드라인에서 npm install -g grunt-cli 를 입력하고, 설치 완료를 기다립니다
二.설정 파일
2 개의 설정 파일이 필요합니다：
-
package.json：Nodejs 패키지 관리용. 프로젝트 의존 모듈 (grunt 및 grunt 플러그인) 을 선언
-
Gruntfile.js：Grunt 설정 파일. 태스크를 정의. Gruntfile.js 또는 Gruntfile.coffee 로 명명 가능
주의：package.json 과 Gruntfile.js 는 모두 프로젝트의 루트 디렉토리에 배치하고, 프로젝트의 소스코드와 함께 제출합니다
단적으로 말하면, Grunt 를 배우는 것은 설정 파일 작성법을 배우는 것입니다
三.package.json
일반 형식은 다음과 같습니다：
{
"name": "프로젝트명",
"version": "프로젝트 버전 번호",
"description": "프로젝트 설명",
"author": "프로젝트 작성자",
"license": "프로젝트 저작권",
"devDependencies": {
//프로젝트 의존 플러그인
}
}
예를 들어 작은 프로젝트의 package.json：
{
"name": "world",
"version": "0.4.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-watch": "^0.6.1"
}
}
package.json 을 작성한 후, 커맨드라인에서 cd 로 들어가고, npm install 을 실행하여,刚才 선언한 각 의존 항목을 다운로드합니다. 현재 디렉토리 하의 node_modules 폴더에 배치됩니다
의존 항목을 추가할 필요가 있을 때는 직접 npm install grunt-contrib-XXX --save-dev 를 실행하면 되며, package.json 의 내용을 자동으로 업데이트할 수 있습니다
주의：
-
주석은 불가.否则 npm install 해석 실패 (어떠한 형식의 주석でも, 파일의 선두미미 부분でも其它でも。。모두 불가)
-
version 은 반드시 X.X.X 형식.X.X 는 오류
実は version 의 포맷에는 복잡한 표준이 있습니다.http://semver.org/를 참조하십시오
- 커맨드라인에서 npm install grunt-contrib-XXX --save-dev 와 같은 커맨드를 입력하면, package.json 을 자동으로 업데이트할 수 있습니다
마지막 의존 모듈 grunt-contrib-watch 는 이ように 추가했습��다
- 버전 번호 앞의~와^는 무슨 뜻인가？
이를 설명하는 자료를 보지 못했지만, 추측할 수 있습니다：^는 최신 버전을 찾는 것을 나타내고, 는 지정 버전을 나타냅니다 (git 의 HEAD^ 와 HEADn 과 같을지도 모릅니다。。물론, 추측에 불과합니다)
일반적으로~를 사용하여 구체적인 버전을 지정합니다. 플러그인의 호환성 및 안정성 문제가 존재할 수 있기 때문입니다
P.S.만약 신뢰할 수 있는 설명을 알고 있다면알려주세요. 감사합니다
- package.json 을 자동으로 생성
커맨드라인에서 npm init 을 입력하고, 커맨드라인의提示에 따라 한 걸음 한 걸음 완료합니다. 실측에서는 사용하기 어렵습니다. 손으로 작성하는 것을 권장합니다. 또는常用的인 템플릿을 작성하여, 강제로 재사용합니다
三.Gruntfile.js
일반 형식은 다음과 같습니다：
module.exports = function(grunt){
// 1. 태스크를 정의
grunt.initConfig({
// 1. package.json 을 읽기
pkg: grunt.file.readJSON('package.json'),
// 2. 각 태스크의 설정 오브젝트를 초기화
task1: {
options: {
// 설정 옵션을 설정
},
build: {
// 입출력 경로 등을 설정
}
},
task2: {
// ...
}
});
// 2. 플러그인을 로드
grunt.loadNpmTasks('Grunt 플러그인명');
// 3. 태스크를 등록
grunt.registerTask('default',['Grunt 태스크']);
grunt.registerTask('mytask',['task1', 'task3']);
};
예를 들어 작은 프로젝트의 package.json：
module.exports = function(grunt) {
// 1. 태스크를 정의
grunt.initConfig({
// 1. package.json 을 읽기
pkg: grunt.file.readJSON("package.json"),
// 2. 각 태스크의 설정 오브젝트를 초기화
// 파일을 결합
concat: {
options: {
// 결합 오류를 방지 (이전 파일의 미비에 세미콜론이 적음)
separator: ";",
//顶部 정보 (주석 포맷을自带할 필요가 있으며, 자동으로 주석하지 않고, 자동으로 개행하지도 않음)
banner: "/*<%= pkg.name %>_<%= pkg.version %> " +
// *주의*:yyyy-mm-dd 는 인용부호를 추가하고, 문자열 파라미터를 나타냄
"<%= grunt.template.today('yyyy-mm-dd') %>*/\r\n\r\n",
//底部 정보
footer: "\r\n\r\n/* author: http://ayqy.net/ */"
},
build: {
src: ["src/w.js", "src/Const.js", "src/Item.js", "src/Map.js", "src/Util.js", "src/Core.js"],
dest: "build/<%= pkg.name %>.js"
}
},
// 코드 검사
jshint: {
options: {
eqeqeq: true, // ===를 요구
trailing: true, // 미비에 공백이 없는 것을 요구
//unused: true, // 사용되지 않은 변수를 경고하는 것을 요구 (모듈화 코드는 오류가 됨)
forin: true, // for-in 은 반드시 hasOwnProp 으로 필터할 것을 요구
curly: true // 중괄호를 요구
},
files: ["Gruntfile.js", "src/*.js"]
},
// 코드를瘦身
uglify: {
options: {
// 변수명을混淆하지 않음
mangle: false,
// 압축률을 출력.선택 가능한 값은 false(정보를 출력하지 않음), gzip
report: "min",
//顶部 정보 (주석 포맷을自带할 필요가 있으며, 자동으로 주석하지 않고, 자동으로 개행하지도 않음)
banner: "/*<%= pkg.name %>_<%= pkg.version %> " +
"<%= grunt.template.today('yyyy-mm-dd') %>*/\r\n\r\n",
//底部 정보
footer: "\r\n\r\n/* author: http://ayqy.net/ */"
},
build: {
files: {
// <%= concat.dist.dest %>는 uglify 가 자동으로 concat 태스크에서 생성된 파일을瘦身하는 것을 나타냄
"build/<%= pkg.name %>.min.js": ["<%= concat.build.dest %>"]
}
}
},
// 파일 변동을 감시하고, 자동으로 태스크를 실행
watch: {
files: ["<%= jshint.files %>"],
tasks: ["default"]
}
});
// 2. 플러그인을 로드
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// 3. 태스크를 등록
grunt.registerTask("default", ["jshint", "concat", "uglify"]); // 디폴트 태스크
grunt.registerTask("check", ["jshint"]); // 커스텀 태스크：코드 검사
};
Gruntfile.js 를 작성한 후, num install 등의 커맨드를 실행할 필요가 없습니다. 직접 grunt TaskName 으로 대응하는 태스크를 실행하면 됩니다.예를 들어：grunt 는 default 태스크를 실행, grunt jshint 는 코드 검사를 실행, grunt mytask 는 순서대로 일련의 태스크를 실행 등입니다
여러 개의 target 이 있는 경우 grunt TaskName*:（영어 반각 콜론）*TargetName 으로 지정의 target 을 실행할 수 있습니다.태스크를 등록할 때도 TaskName:TargetName 으로 target 을 지정할 수 있습니다
P.S.target 이란 무엇인가에 대해서는, 아래를 계속 보십시오.Gruntfile.js 를 설정하는 것은 조금 번거로울지도 모르지만, 다행히 한 번만 설정하면 되며, 이후 직접 사용할 수 있습니다.某些의 상세를 아직あまり 이해하지 못할지도 모르지만, 반드시 아래의 주의 부분을看完하십시오
주의：
- dist 와 build 는 어느 것을 사용하나？
常见的有 options-dist 와 options-build 의 2 종류로, 모두 사용 가능합니다.이름은 어떻게でも좋기 때문입니다
options 만이有所謂입니다.예를 들어 이ように할 수 있습니다：
concat: {
options: {
separator: ";"
},
xx: {
src: "src/*.js",
dest: "<%= pkg.name %>.js"
}
}
물론 이ように도 할 수 있습니다：
concat: {
options: {
separator: ";"
},
xx: {
src: "src/*.js",
dest: "<%= pkg.name %>.js"
},
xxx: {
src: "src/*.js",
dest: "<%= pkg.name %>.js"
}
}
그리고 grunt concat 을 실행하면, xx 와 xxx 를 순서��로 실행합니다.따라서 target 이 1 개만 (xx 와 xxx 는 모두 target 이라고 부름) 인 경우, build 와 dist 를 사용해도 차이는 없습니다.의미적으로 구분할 필요가 없기 때문입니다
여러 개의 target 이 있는 경우, 의미적으로 우호적인 이름을 붙이는 것이 좋습니다
P.S.개인적으로는 build 를 선호합니다.물론, 이름은 중요하지 않으므로,某些의 튜토리얼에서는 bar, foo 등도 나타나, 사람을 혼란시킵니다
- options 에 대해
위의 예는 grunt 가 options 만을 인정하는 것을 설명합니다 (주의:s 가 1 개 적어도 안 됩니다哟~).options 가 아닌 이름은 모두 target 으로 실행됩니다
前の 예는 모두 target 급의 options 이지만,実は task 급의 options 도 있습니다.task 하의 모든 target 에 작용할 수 있습니다.물론, 이를 몰라도 관계없습니다.코드를 조금 많이 작성할 뿐입니다
-
동명 태스크를 등록하면 죽再帰이 됩니다
grunt.registerTask("concat", ["concat"]); -
태스크에 별명을 붙일 수 있습니다
grunt.registerTask("check", ["jshint"]); // 커스텀 태스크：코드 검사 -
더 많은 예
더 많은 예가 필요하고 이해를 도울 필요가 있다면, 스스로 작은 프로젝트를 작성하여, 천천히 테스트하는 것을 권장합니다
实在시간이 없는 경우, 博客園：grunt 사용 소기之 uglify：最全의 uglify 사용 DEMO 를 참조하십시오
四.온라인 리소스
- 어느 플러그인이 니즈를 만족하고, 안정적이며, 사용하기 쉬운지 모른다
http://www.gruntjs.net/plugins
링크 페이지는 30 일 이내의 다운로드량 top100 의 플러그인을示하며, 기능簡介, 최종 업데이트 시간 등이 붙어 있습니다.클릭하면 대응하는 npm 공식 사이트 플러그인 홈페이지로 점프합니다.게다가 검색도 지원하며, 매우 편리합니다
- XX 플러그인에 어떠한 설정 옵션이 있는지 모른다
링크 페이지는 npm 공식 사이트로, 검색 박스에 플러그인 이름을 입력하면 됩니다.예를 들어 grunt-contrib-watch
플러그인 홈페이지는 상세한 설정 설명 및 예를 제공합니다.예를 들어 watch 의 설정 옵션：
가장 간단한 사용법：
watch: {
files: ['**/*'],
tasks: ['jshint']
}
또는 복잡한：
watch: {
sass: {
// We watch and compile sass files as normal but don't live reload here
files: ['src/sass/*.sass'],
tasks: ['sass']
},
livereload: {
// Here we watch the files the sass task will compile to
// These files are sent to the live reload server after sass compiles to them
options: { livereload: true },
files: ['dest/**/*']
}
}
3. Grunt API
링크 페이지에는 Grunt 의 모든 API 가 있습니다.예를 들어 grunt.log, grunt.initConfig 등등.새로운 것을 보면就去查吧
참고 자료
-
W3CPlus：Grunt 튜토리얼——Grunt 에 첫발걸음：대부분의 입문 튜토리얼보다 훨씬 좋음
-
Grunt 中文 공식 사이트：추천하지 않음
-
Grunt 영문 공식 사이트：강력히 추천합니다
-
博客園：【grunt 통합판】30 분 만에 grunt 를 사용하여 프런트엔드 코드를 패키징하는 방법을 배우다：만약寂寞를 견딜 수 있다면 이것을 봐도。。
아직 댓글이 없습니다