Existem as seguintes etapas:
1. Crie um novo projeto Bejs
2. Crie um novo pacote de arquivos.json
3. Crie um novo arquivo Gruntfile.js
4. Execute tarefas grunhidas na linha de comando
1. Novo projeto bejs
O código -fonte é colocado no SRC e o diretório possui dois subdiretos ativos e JS. JS descentraliza selettor.js e Ajax.js, que foi discutido no artigo anterior de como mesclar e comprimi -los. Este artigo se concentra apenas no diretório de ativos, que contém algumas imagens e arquivos CSS. Em algum tempo, os dois recursos CSS são redefinidos.css e style.css serão mesclados e compactados no diretório de destes/ativos. Uma versão de mesclagem all.css, uma versão compactada all-min.css.
2. Crie um novo pacote.json
O Package.json é colocado no diretório raiz e seu significado foi introduzido no artigo anterior. 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-Concat": "~ 0.1.1",
"Grunt-css": "> 0.0.0"
}
}
O artigo anterior do Grunt-Contrib-Concat foi introduzido. Grunt-CSS é o plugin a ser usado neste artigo.
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 e descobriu que existe um diretório adicional de node_modules, incluindo quatro subdiretos, 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.
O código -fonte é 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: {
CSS: {
src: ['src/asset/*. css'],
Dest: 'Dest/Asset/all.css'
}
},
cssmin: {
CSS: {
src: 'dest/att/all.css',
Dest: 'Dest/Asset/All-Min.css'
}
}
});
// Carregar plugins concat e css, para mesclagem e compactação, respectivamente
Grunt.LoadnpMTasks ('Grunt-Contrib-Concat');
Grunt.LoadnpMTasks ('Grunt-Css');
// tarefa padrão
Grunt.RegisterTask ('padrão', ['concat', 'cssmin']);
};
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 destin e os arquivos esperados são gerados. Neste momento, há mais dest no diretório do projeto, como segue
Neste ponto, a mesclagem e a compactação do CSS são concluídas.