Hay los siguientes pasos:
1. Cree un nuevo proyecto BEJS
2. Cree un nuevo paquete de archivo.json
3. Cree un nuevo archivo gruntfile.js
4. Ejecutar tareas de gruñidos en la línea de comando
1. Nuevo proyecto BEJS
El código fuente se coloca en SRC, y el directorio tiene dos subdirectorios activos y JS. JS descentraliza Selector.js y Ajax.js, que se ha discutido en el artículo anterior cómo fusionarlos y comprimirlos. Este artículo solo se centra en el directorio de activos, que contiene algunas imágenes y archivos CSS. En un tiempo, los dos recursos CSS se restablecen.css y style.css se fusionarán y comprimirán en el directorio Dest/Asset. Una versión de fusión All.css, una versión comprimida All-Min.css.
2. Cree un nuevo paquete.json
paquete.json se coloca en el directorio raíz, y su significado se ha introducido en el artículo anterior. La estructura actual del proyecto es la siguiente
El contenido de paquete de paquete. Json debe cumplir con las especificaciones de sintaxis JSON, de la siguiente manera
La copia del código es la siguiente:
{
"Nombre": "bejs",
"Versión": "0.1.0",
"Devdependencias": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-Concat": "~ 0.1.1",
"Grunt-CSS": "> 0.0.0"
}
}
Se ha introducido el artículo anterior de Grunt-Contrib-Concat. Grunt-CSS es el complemento que se utilizará en este artículo.
En este momento, abra la herramienta de línea de comandos e ingrese el directorio raíz del proyecto, y escriba el siguiente comando: install npm
Verifique el directorio raíz y descubra que hay un directorio adicional de Node_Modules, que incluye cuatro subdirectorios, vea la imagen
3. Cree un nuevo archivo gruntfile.js
Gruntfile.js también se coloca en el directorio de la raíz del proyecto. Casi todas las tareas se definen en este archivo. Es un archivo JS ordinario, donde se puede escribir cualquier código JS en lugar de JSON. Al igual que paquete.json, debe enviarse a SVN o GIT como el código fuente.
El código fuente es el siguiente
La copia del código es la siguiente:
módulo.exports = function (grunt) {
// Configuración
grunt.initconfig ({
PKG: Grunt.file.readjson ('paquete.json'),
concat: {
CSS: {
src: ['src/asset/*. css'],
Dest: 'Dest/Asset/All.CSS'
}
},
cssmin: {
CSS: {
Src: 'Dest/Asset/All.CSS',
Dest: 'Dest/Asset/All-Min.css'
}
}
});
// cargar complementos de concat y CSS, para fusionar y compresión respectivamente
grunt.loadnpmtasks ('Grunt-Contrib-Concat');
grunt.loadnpmtasks ('Grunt-CSS');
// Tarea predeterminada
grunt.registerTask ('predeterminado', ['concat', 'cssmin']);
};
4. Ejecutar tareas de gruñidos
Abra la línea de comandos, ingrese el directorio raíz del proyecto y haga clic en Grunt
A partir de la información de impresión, se ve que se generan la fusión y la compresión exitosas y se generan el directorio Dest y los archivos esperados. En este momento, hay más Dest en el directorio del proyecto, como sigue
En este punto, se completan la fusión y la compresión CSS.