Grunt-작업 구성
Gruntfile.js 파일 에서 Grunt에 대한 프로젝트 별 구성 데이터를 정의 할 수 있습니다 .
Grunt 구성
작업 구성 데이터는 grunt.initConfig () 메서드를 사용하여 Gruntfile 에서 초기화 할 수 있습니다 . grunt.initConfig () 함수 내 에서 package.json 파일에서 구성 정보를 가져옵니다. 구성에는 다음과 같은 작업이 포함됩니다.properties 및 임의의 데이터.
grunt.initConfig({
jshint: {
// configuration for jshint task
},
cssmin: {
// configuration for cssmin task
},
// Arbitrary non-task-specific properties
my_files: ['dir1/*.js', 'dir2/*.js'],
});작업 구성 및 대상
작업을 실행할 때 Grunt는 작업 이름 속성에서 구성을 찾습니다. 다음과 같이 여러 구성 및 대상 옵션으로 작업을 정의합니다.
grunt.initConfig({
jshint: {
myfile1: {
// configuration for "myfile1" target options
},
myfile2: {
// configuration for "myfile2" target options
},
},
cssmin: {
myfile3: {
// configuration for "myfile3" target options
},
},
});여기서 jshint 작업에는 myfile1 및 myfile2 대상이 있고 cssmin 작업에는 myfile3 대상이 있습니다. grunt jshint를 실행할 때 지정된 대상의 구성을 처리하기 위해 작업과 대상을 모두 반복합니다.
옵션
작업 기본값을 재정의하는 작업 구성 내 에서 옵션 속성을 정의합니다 . 각 대상에는 작업 수준 옵션을 재정의하는 옵션 속성이 포함되어 있습니다. 다음 형식을 갖게됩니다.
grunt.initConfig({
jshint: {
options: {
// task-level options that overrides task defaults
},
myfile: {
options: {
// "myfile" target options overrides task defaults
},
},
myfile1: {
// there is no option, target will use task-level options
},
},
});파일
Grunt는 작업이 작동해야하는 파일을 지정하기위한 몇 가지 아이디어를 제공하고 src-dest 파일 매핑 을 지정하는 다른 방법을 사용 합니다. 다음은 src 및 dest 매핑 에서 지원하는 추가 속성 중 일부입니다.
filter− 일치하는 src 파일 경로 를 지정 하고 true 또는 false 값을 반환 하는 함수입니다 .
nonull − true로 설정하면 일치하지 않는 패턴을 정의합니다.
dot − 마침표 또는 기타로 시작하는 파일 이름과 일치합니다.
matchBase − 경로의 기본 이름과 슬래시가 포함 된 패턴을 일치시킵니다.
expand − src-dest 파일 매핑을 처리합니다.
컴팩트 형식
그것은 읽기 전용 작업에 사용만을 필요로 할 수있다 대상 당 SRC-이명 령 파일 매핑 지정 SRC 특성없이 이명 령 속성을.
grunt.initConfig({
jshint: {
myfile1: {
src: ['src/file1.js','src/file2.js']
},
},
cssmin: {
myfile2: {
src: ['src/file3.js','src/file4.js'],
dest: 'dest/destfile.js',
},
},
});파일 개체 형식
속성 이름이 dest 파일이고 값이 src 파일 인 대상별로 src-dest 파일 매핑을 지정 합니다.
grunt.initConfig({
jshint: {
myfile1: {
files: {
'dest/destfile.js':['src/file1.js','src/file2.js'],
'dest/destfile1.js':['src/file3.js','src/file4.js'],
},
},
myfile2: {
files: {
'dest/destfile2.js':['src/file22.js','src/file23.js'],
'dest/destfile21.js':['src/file24.js','src/file25.js'],
},
},
},
});파일 배열 형식
매핑 별 추가 속성을 사용하여 대상별 src-dest 파일 매핑을 지정합니다.
grunt.initConfig({
jshint: {
myfile1: {
files: [
{src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
{src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
],
},
myfile2: {
files: [
{src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
{src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
],
},
},
});이전 형식
의 최종 도착로서의 목표 파일 형식은 대상 파일 경로가 대상의 이름입니다 멀티 태스킹의 존재 전에 있었다. 다음 형식은 더 이상 사용되지 않으며 코드에서 사용되지 않습니다.
grunt.initConfig({
jshint: {
'dest/destfile2.js':['src/file3.js','src/file4.js'],
'dest/destfile5.js':['src/file6.js','src/file7.js'],
},
});커스텀 필터 기능
filter 속성 을 사용하여 세부적으로 대상 파일을 도울 수 있습니다 . 다음 형식은 실제 파일과 일치하는 경우에만 파일을 정리합니다.
grunt.initConfig({
clean: {
myfile:{
src: ['temp/**/*'],
filter: 'isFile',
},
},
});글 로빙 패턴
글 로빙은 파일 이름을 확장하는 것을 의미합니다. Grunt는 내장 된 node-glob 및 minimatch 라이브러리 를 사용하여 globbing을 지원합니다 . 글 로빙 패턴에는 다음 사항이 포함됩니다.
- * 는 모든 문자와 일치하지만 / 와는 일치하지 않습니다 .
- ? 단일 문자와 일치하지만 / 와는 일치하지 않습니다 .
- ** 는 /를 포함한 여러 문자와 일치합니다 .
- {}는 쉼표로 구분 된 "or"표현식 목록을 지정합니다.
- ! 처음에 패턴 일치를 무효화합니다.
예를 들어-
{src: 'myfile/file1.js', dest: ...} // it specifies the single file
{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js
{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern
{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha
// order except for file1.js동적으로 파일 개체 빌드
개별 파일로 작업 할 때 추가 속성을 사용하여 동적으로 파일 목록을 작성할 수 있습니다. 당신이 설정할 때expand 속성을 true로 설정하면 다음 속성 중 일부를 사용할 수 있습니다.
cwd 는 모든 src 를이 경로에 일치 시킵니다 .
src 는 cwd에 상대적으로 일치시킬 패턴과 일치합니다 .
dest 속성은 대상 경로 접두사를 지정합니다.
ext 는 기존 확장을 대상 경로 에서 생성 된 값으로 대체 합니다.
extDot 는 확장을 나타내는 기간이있는 위치를 나타냅니다. 그것은 중 하나를 사용하여 첫 번째 기간 또는 마지막 기간; 기본적으로 첫 번째 기간으로 설정됩니다.
flatten 은 대상 경로 에서 모든 경로 부분을 제거합니다 .
rename 은 새 대상 및 파일 이름을 포함하는 문자열을 지정합니다.
Rename 속성
문자열을 반환하는 고유 한 JavaScript 함수이며 이름 바꾸기에 문자열 값을 사용할 수 없습니다. 다음 예에서 복사 작업은 README.md의 백업을 생성합니다.
grunt.initConfig({
copy: {
backup: {
files: [{
expand: true,
src: ['docs/README.md'], // creating a backup of README.md
rename: function () { // specifies the rename function
return 'docs/BACKUP.txt'; // returns a string with the complete destination
}
}]
}
}
});템플릿
<% %> 구분 기호를 사용하여 템플릿을 지정할 수 있습니다 . 구성에서 읽을 때 자동으로 확장됩니다. 그것은 두 가지 유형의 속성을 포함합니다-
<%= prop.subprop %>속성은 문자열 값, 배열 및 기타 개체를 참조 할 수있는 구성에서 prop.subprop 의 값을 확장하는 데 사용됩니다 .
<% %> 속성은 제어 흐름 또는 루핑에 사용되는 인라인 JavaScript 코드를 실행합니다.
예를 들어-
grunt.initConfig({
concat: {
myfile: {
options: {
banner: '/* <%= val %> */\n',
},
src: ['<%= myval %>', 'file3/*.js'],
dest: 'build/<%= file3 %>.js',
},
},
// properties used in task configuration templates
file1: 'c',
file2: 'b<%= file1 %>d',
file3: 'a<%= file2 %>e',
myval: ['file1/*.js', 'file2/*.js'],
});외부 데이터 가져 오기
package.json 파일 에서 외부 데이터를 가져올 수 있습니다 . grunt- contrib- uglify 플러그인은 소스 파일을 축소 하는 데 사용할 수 있으며 메타 데이터를 사용하여 배너 주석을 생성합니다. grunt.file.readJSON 및 grunt.file.readYAML 을 사용하여 JSON 및 YAML 데이터를 가져올 수 있습니다 .
예를 들어-
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
}
});