Grunt - Configurando Tarefas
Você pode definir dados de configuração específicos do projeto para Grunt no arquivo Gruntfile.js .
Configuração Grunt
Os dados de configuração da tarefa podem ser inicializados no Gruntfile usando o método grunt.initConfig () . Dentro da função grunt.initConfig () , obtenha as informações de configuração do arquivo package.json. A configuração conterá uma tarefa chamadaproperties e quaisquer dados arbitrários.
grunt.initConfig({
jshint: {
// configuration for jshint task
},
cssmin: {
// configuration for cssmin task
},
// Arbitrary non-task-specific properties
my_files: ['dir1/*.js', 'dir2/*.js'],
});Configuração de tarefas e metas
Quando você está executando uma tarefa, Grunt procura a configuração na propriedade nomeada por tarefa. Vamos definir tarefas com várias configurações e opções de destino, conforme mostrado abaixo -
grunt.initConfig({
jshint: {
myfile1: {
// configuration for "myfile1" target options
},
myfile2: {
// configuration for "myfile2" target options
},
},
cssmin: {
myfile3: {
// configuration for "myfile3" target options
},
},
});Aqui, jshint tarefa tem myfile1 e myfile2 alvos e cssmin tarefa tem myfile3 alvo. Quando você está executando o grunt jshint , ele itera sobre a tarefa e o destino para processar a configuração do destino especificado.
Opções
Defina a propriedade options dentro da configuração da tarefa que substitui os padrões da tarefa. Cada destino inclui propriedades de opções que substituem as opções de nível de tarefa. Terá o seguinte formato -
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
},
},
});arquivos
Grunt fornece algumas idéias para especificar em quais arquivos a tarefa deve operar e usa diferentes maneiras de especificar os mapeamentos de arquivo src-dest . A seguir estão algumas das propriedades adicionais que são suportadas pelos mapeamentos src e dest -
filter- É uma função que especifica o caminho do arquivo src correspondente e retorna valores verdadeiros ou falsos.
nonull - Ele define os padrões não correspondentes quando é definido como verdadeiro.
dot - Corresponde aos nomes dos arquivos que começam com um ponto ou outro ponto.
matchBase - Corresponde aos padrões que contém barras com o nome de base do caminho.
expand - Ele processa o mapeamento do arquivo src-dest.
Formato Compacto
Ele especifica o mapeamento do arquivo src-dest por destino que pode ser usado para tarefas somente leitura e requer apenas a propriedade src e nenhuma propriedade dest .
grunt.initConfig({
jshint: {
myfile1: {
src: ['src/file1.js','src/file2.js']
},
},
cssmin: {
myfile2: {
src: ['src/file3.js','src/file4.js'],
dest: 'dest/destfile.js',
},
},
});Formato de objeto de arquivos
Ele especifica o mapeamento do arquivo src-dest por destino em que o nome da propriedade é o arquivo dest e seu valor é o arquivo 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'],
},
},
},
});Formato de array de arquivos
Ele especifica o mapeamento do arquivo src-dest por destino usando propriedades adicionais por mapeamento.
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'},
],
},
},
});Formatos mais antigos
O formato de arquivo dest-as-target existia antes da existência das multitarefas em que o caminho do arquivo de destino é o nome do destino. O formato a seguir está obsoleto e não deve ser usado no código.
grunt.initConfig({
jshint: {
'dest/destfile2.js':['src/file3.js','src/file4.js'],
'dest/destfile5.js':['src/file6.js','src/file7.js'],
},
});Função de filtro personalizado
Você pode ajudar os arquivos de destino com um grande nível de detalhe usando a propriedade de filtro . O formato a seguir limpa os arquivos apenas se corresponder a um arquivo real.
grunt.initConfig({
clean: {
myfile:{
src: ['temp/**/*'],
filter: 'isFile',
},
},
});Padrões de Globbing
Globbing significa expandir o nome do arquivo. Grunt suporta globbing usando as bibliotecas nodo-glob e minimatch integradas . O padrão globbing inclui os seguintes pontos -
- * corresponde a qualquer número de caracteres, mas não a / .
- ? corresponde a um único caractere, mas não a / .
- ** corresponde a vários caracteres, incluindo / .
- {} especifica uma lista separada por vírgulas de expressões "ou".
- ! irá negar a correspondência de padrão no início.
Por exemplo -
{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.jsConstruindo o Objeto Files dinamicamente
Ao trabalhar com arquivos individuais, você pode usar propriedades adicionais para construir uma lista de arquivos dinamicamente. Quando você define oexpand propriedade para true, ele ativará algumas das seguintes propriedades -
cwd corresponde a todos os src para este caminho.
src combina os padrões para combinar, em relação ao cwd .
A propriedade dest especifica o prefixo do caminho de destino.
ext substituirá uma extensão existente por um valor gerado em caminhos dest .
extDot indica onde o período que indica a extensão está localizado. Ele usa o primeiro ou o último período; por padrão, é definido para o primeiro período
flatten remove todas as partes do caminho dos caminhos dest .
renomear especifica uma string contendo o novo destino e nome de arquivo.
A propriedade Rename
É uma função JavaScript única que retorna uma string e você não pode usar um valor de string para renomear. No exemplo a seguir, a tarefa de cópia criará um backup do 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
}
}]
}
}
});Modelos
Você pode especificar os modelos usando delimitadores < %% > . Eles serão expandidos automaticamente quando forem lidos na configuração. Inclui dois tipos de propriedades -
<%= prop.subprop %>propriedade é usada para expandir o valor de prop.subprop na configuração que pode referenciar os valores de string, matrizes e outros objetos.
<% %> propriedade executa o código JavaScript embutido que é usado para fluxo de controle ou looping.
Por exemplo -
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'],
});Importando Dados Externos
Você pode importar dados externos do arquivo package.json . O plugin grunt- contrib - uglify pode ser usado para minificar o arquivo de origem e cria um comentário de banner usando metadados. Você pode usar grunt.file.readJSON e grunt.file.readYAML para importar dados JSON e YAML.
Por exemplo -
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'
}
}
});