Grunt - Định cấu hình nhiệm vụ
Bạn có thể xác định dữ liệu cấu hình dự án cụ thể cho Grunt trong tệp Gruntfile.js .
Cấu hình Grunt
Dữ liệu cấu hình tác vụ có thể được khởi tạo trong Gruntfile bằng cách sử dụng phương thức grunt.initConfig () . Bên trong hàm grunt.initConfig () , lấy thông tin cấu hình từ tệp package.json. Cấu hình sẽ chứa một nhiệm vụ có tênproperties và bất kỳ dữ liệu tùy ý nào.
grunt.initConfig({
jshint: {
// configuration for jshint task
},
cssmin: {
// configuration for cssmin task
},
// Arbitrary non-task-specific properties
my_files: ['dir1/*.js', 'dir2/*.js'],
});Cấu hình nhiệm vụ và mục tiêu
Khi bạn đang chạy một tác vụ, Grunt sẽ tìm kiếm cấu hình trong thuộc tính có tên tác vụ. Chúng tôi sẽ xác định các nhiệm vụ với nhiều cấu hình và các tùy chọn mục tiêu như hình dưới đây -
grunt.initConfig({
jshint: {
myfile1: {
// configuration for "myfile1" target options
},
myfile2: {
// configuration for "myfile2" target options
},
},
cssmin: {
myfile3: {
// configuration for "myfile3" target options
},
},
});Ở đây, jshint nhiệm vụ có myfile1 và myfile2 mục tiêu và cssmin nhiệm vụ có myfile3 mục tiêu. Khi bạn đang chạy jshint grunt , nó sẽ lặp lại cả nhiệm vụ và mục tiêu để xử lý cấu hình của mục tiêu được chỉ định.
Tùy chọn
Xác định thuộc tính tùy chọn bên trong cấu hình tác vụ ghi đè các giá trị mặc định của tác vụ. Mỗi mục tiêu bao gồm thuộc tính tùy chọn ghi đè các tùy chọn cấp nhiệm vụ. Nó sẽ có định dạng sau:
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
},
},
});Các tập tin
Grunt cung cấp một số ý tưởng để chỉ định các tệp mà tác vụ sẽ hoạt động và sử dụng các cách khác nhau để chỉ định ánh xạ tệp src-dest . Sau đây là một số thuộc tính bổ sung được hỗ trợ bởi ánh xạ src và đích :
filter- Đây là một hàm chỉ định đường dẫn tệp src phù hợp và trả về giá trị true hoặc false.
nonull - Nó xác định các mẫu không khớp khi nó được đặt thành true.
dot - Nó khớp với các tên tệp bắt đầu bằng dấu chấm hoặc cách khác.
matchBase - Nó khớp với các mẫu có chứa dấu gạch chéo với tên cơ sở của đường dẫn.
expand - Nó xử lý ánh xạ tệp src-dest.
Định dạng nhỏ gọn
Nó chỉ định ánh xạ tệp src-dest cho mỗi mục tiêu có thể được sử dụng cho các tác vụ chỉ đọc và chỉ yêu cầu thuộc tính src và không có thuộc tính đích .
grunt.initConfig({
jshint: {
myfile1: {
src: ['src/file1.js','src/file2.js']
},
},
cssmin: {
myfile2: {
src: ['src/file3.js','src/file4.js'],
dest: 'dest/destfile.js',
},
},
});Định dạng đối tượng tệp
Nó chỉ định ánh xạ tệp src-dest cho mỗi mục tiêu, trong đó tên thuộc tính là tệp đích và giá trị của nó là tệp src .
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'],
},
},
},
});Định dạng mảng tệp
Nó chỉ định ánh xạ tệp src-đích cho mỗi mục tiêu bằng cách sử dụng các thuộc tính bổ sung cho mỗi ánh xạ.
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'},
],
},
},
});Các định dạng cũ hơn
Các dest-as-mục tiêu định dạng tập tin đã có trước sự tồn tại của multitasks nơi đường dẫn tập tin đích là tên của mục tiêu. Định dạng sau không được dùng nữa và nó sẽ không được sử dụng trong mã.
grunt.initConfig({
jshint: {
'dest/destfile2.js':['src/file3.js','src/file4.js'],
'dest/destfile5.js':['src/file6.js','src/file7.js'],
},
});Chức năng lọc tùy chỉnh
Bạn có thể giúp các tệp đích với mức độ chi tiết cao bằng cách sử dụng thuộc tính bộ lọc . Định dạng sau chỉ xóa tệp nếu nó khớp với tệp thực.
grunt.initConfig({
clean: {
myfile:{
src: ['temp/**/*'],
filter: 'isFile',
},
},
});Các mẫu bóng
Globbing có nghĩa là mở rộng tên tệp. Grunt hỗ trợ globbing bằng cách sử dụng các thư viện nút và minimatch tích hợp sẵn . Hình cầu bao gồm các điểm sau:
- * khớp với bất kỳ số ký tự nào, nhưng không khớp với / .
- ? khớp với một ký tự, nhưng không khớp với / .
- ** khớp với một số ký tự bao gồm / .
- {} chỉ định danh sách các biểu thức "hoặc" được phân tách bằng dấu phẩy.
- ! sẽ phủ định kết quả khớp mẫu lúc đầu.
Ví dụ -
{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.jsXây dựng đối tượng tệp một cách động
Khi bạn đang làm việc với các tệp riêng lẻ, bạn có thể sử dụng các thuộc tính bổ sung để tạo danh sách tệp động. Khi bạn đặtexpand thuộc tính true, nó sẽ kích hoạt một số thuộc tính sau:
cwd khớp tất cả src với đường dẫn này.
src so khớp các mẫu để phù hợp, liên quan đến cwd .
thuộc tính đích chỉ định tiền tố đường dẫn đích.
ext sẽ thay thế một phần mở rộng hiện có bằng một giá trị được tạo trong các đường dẫn đích .
extDot cho biết dấu chấm cho biết phần mở rộng nằm ở đâu. Nó sử dụng khoảng thời gian đầu tiên hoặc kỳ cuối cùng ; theo mặc định, nó được đặt thành khoảng thời gian đầu tiên
flatten loại bỏ tất cả các phần đường dẫn khỏi các đường dẫn đích .
đổi tên chỉ định một chuỗi chứa đích và tên tệp mới.
Thuộc tính đổi tên
Đây là một hàm JavaScript duy nhất trả về một chuỗi và bạn không thể sử dụng giá trị chuỗi để đổi tên. Trong ví dụ sau, tác vụ sao chép sẽ tạo một bản sao lưu của 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
}
}]
}
}
});Mẫu
Bạn có thể chỉ định các mẫu bằng cách sử dụng dấu phân cách <%%> . Chúng sẽ được mở rộng tự động khi chúng được đọc từ cấu hình. Nó bao gồm hai loại thuộc tính -
<%= prop.subprop %>thuộc tính được sử dụng để mở rộng giá trị của prop.subprop trong cấu hình có thể tham chiếu đến các giá trị chuỗi, mảng và các đối tượng khác.
<% %> thuộc tính thực thi mã JavaScript nội tuyến được sử dụng cho luồng điều khiển hoặc vòng lặp.
Ví dụ -
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'],
});Nhập dữ liệu bên ngoài
Bạn có thể nhập dữ liệu bên ngoài từ tệp package.json . Plugin grunt- Contrib- uglify có thể được sử dụng để thu nhỏ tệp nguồn và nó tạo ra một nhận xét biểu ngữ bằng cách sử dụng siêu dữ liệu. Bạn có thể sử dụng grunt.file.readJSON và grunt.file.readYAML để nhập dữ liệu JSON và YAML.
Ví dụ -
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'
}
}
});