Provavelmente existem as seguintes etapas
Novo projeto Bejs
Crie um novo pacote de arquivos.json
Crie um novo arquivo Gruntfile.js
Executar tarefas grunhidas na linha de comando
1. Novo projeto bejs
O código -fonte é colocado no SRC, e o diretório possui dois arquivos JS, Selector.js e Ajax.js. Após a compilação, o código é colocado no destino e esse grunhido será gerado automaticamente.
2. Crie um novo pacote.json
O Package.json é colocado no diretório raiz e contém algumas meta -informações do projeto, como nome do projeto, descrição, número da versão, pacote de dependência etc. Ele deve ser enviado ao SVN ou GIT como o código -fonte. A estrutura atual do projeto é a seguinte
O conteúdo do package.json deve atender às especificações da sintaxe do JSON, como segue
A cópia do código é a seguinte:
{
"Nome": "bejs",
"versão": "0.1.0",
"DevDependências": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-jshint": "~ 0.1.1",
"Grunt-Contrib-uplify": "~ 0,1.2",
"Grunt-Contrib-Concat": "~ 0,1.1"
}
}
O grunhido em DevDependências foi instalado no artigo anterior, enquanto não está instalado o Artrib-Contrib-JSHINT/Grunt-Contrib-ugulify/Grunt-Contrib-Concat. Três para três tarefas
Verificação da sintaxe do Grunt-Contrib-JS
Compressão Grunt-Contrib-uplify, usando UglifyJs
Arquivos de mesclagem de contrib-contrrib-concat
No momento, abra a ferramenta de linha de comando e insira o diretório raiz do projeto e digite o seguinte comando: npm install
Verifique o diretório raiz novamente e descobriu que existe um diretório adicional de node_modules, incluindo quatro subdiretórios, veja a imagem
3. Crie um novo arquivo Gruntfile.js
Gruntfile.js também é colocado no diretório raiz do projeto. Quase todas as tarefas são definidas neste arquivo. É um arquivo JS comum, onde qualquer código JS pode ser escrito em vez de JSON. Como o package.json, ele deve ser enviado ao SVN ou Git como o código -fonte.
Gruntfile.js consiste no seguinte conteúdo
A função Wrapper possui a seguinte estrutura. Esta é uma maneira típica de escrever node.js. Use exportações para expor a API
A cópia do código é a seguinte:
Module.Exports = function (Grunt) {
// Faça coisas relacionadas a grunhidas aqui
};
Configuração do projeto e tarefa
Carregue plugins e tarefas grunhidos
Personalize a execução de tarefas
Este exemplo completa as seguintes tarefas
Mesclar os arquivos sob src (ajax.js/selector.js) para domop.js
Compactar domop.js para domop.min.js
Ambos os arquivos são colocados no diretório DEST
O final Gruntfile.js é o seguinte
A cópia do código é a seguinte:
Module.Exports = function (Grunt) {
// Configuração
Grunt.initConfig ({
PKG: Grunt.File.Readjson ('Package.json'),
Concat: {
DOMOP: {
src: ['src/ajax.js', 'src/selector.js'],
dest: 'dest/domop.js'
}
},
Uglify: {
Opções: {
banner: '/*! < %= pkg.name %> < %= Grunt.
},
construir : {
src: 'dest/domop.js',
dest: 'dest/domop.min.js'
}
}
});
// carrega plugins concatados e uglify, para mesclagem e compressão, respectivamente
Grunt.LoadnpMTasks ('Grunt-Contrib-Concat');
Grunt.LoadnpMtasks ('Grunt-Contrib-uplify');
// Registre uma tarefa
Grunt.RegisterTask ('padrão', ['concat', 'uglify']);
};
4. Execute tarefas grunhidas
Abra a linha de comando, insira o diretório raiz do projeto e clique em Grunt
A partir das informações de impressão, observa -se que a mesclagem e a compactação bem -sucedidas são geradas e o diretório DEST e os arquivos esperados são gerados. Neste momento, há mais dest no diretório do projeto, como segue
OK, aqui estão duas tarefas comuns, concat e esbelta, jshint, etc., que não são introduzidas. O código em Gruntfile.js não é interpretado um por um. Os alunos interessados podem encontrá -lo no documento oficial dos grunhidos.