Grunt se basa en Node.js y se desarrolla en JS. De esta manera, puede usar Node.js para realizar operaciones de escritorio cruzadas y sistemas cruzados, como operaciones de archivos, etc. Además, Grunt y sus complementos se usan como un paquete que se puede administrar utilizando la instalación de NPM.
Por lo tanto, el archivo del proyecto Package.json generado por NPM puede registrar el complemento Grunt utilizado en el proyecto actual, y Grunt llamará al archivo Gruntfile.js, analizará las tareas (tareas) y realizará las operaciones correspondientes.
Instalar gruñido-cli
De hecho, es instalar Grunt-Cli, donde se instala la interfaz de línea de comandos de Grunt (CLI). Después de eso, el comando Grunt se reconocerá en el símbolo del sistema. La instalación de Grunt-Cli no se llama Instalar Grunt. Esto se debe a que el gruñido en sí no se usa a nivel mundial. Si desea usar Grunt, debe instalar Grunt una vez para cualquier directorio de trabajo específico. Esto también se debe a que diferentes directorios de trabajo requieren diferentes trabajos de automatización a través del gruñido, por lo que debe configurarse de forma independiente.
NPM Install -G Grunt -Cli
―Save-Dev Parameter, lo que indica que lo recién instalado se agregará al archivo Packle.json.
Generar el archivo paquete.json
NPM tiene un requisito para el directorio de trabajo. Este requisito es: hay un paquete.json en la ubicación del directorio root.
documento. Este archivo define alguna información del proyecto (nombre, descripción) correspondiente al directorio de trabajo, así como a las dependencias del paquete (es decir, el módulo NPM).
Ejecutar el siguiente comando para inicializar
NPM Init
Instale complementos Grunt y requeridos para el directorio de trabajo actual
Método 1
Instalamos Grunt en el directorio global antes, y ahora necesitamos presentarlo a la ruta del proyecto actual. Al mismo tiempo, los complementos requeridos pueden incluir estos:
Fusionar archivos: gruñe-confuncat
Verificación de sintaxis: Grunt-Contrib-Jshint
SCSS compilado: Grunt-Contrib-Sass
Archivo comprimido: Grunt-Contrib -uglify
Escuche los cambios de archivo: Grunt-Contrib-Watch
Cree un servidor local: gruñido-confunnect
La forma en que se pueden instalar es:
NPM Install--Save-Dev Gruntnpm Install-Save-Dev Plugin 1 Plugin 2 Plugin 3
En este momento, hay algún código adicional en la carpeta Package.json.
"Devdependencies": {"Grunt": "0.4.1"},Método 2 - Cambiar paquete.json manualmente
"Devdependencies": {"Grunt": "~ 0.4.1", "Grunt-Contrib-Cssmin": "~ 0.7.0"}Agregue manualmente este campo en el archivo Packle.json y agregue los paquetes de los que se deben depender. Si solo necesita instalar la última versión, puede cambiarla a * y luego ejecutar la instalación de NPM. Encontrará que hay una carpeta Node_Modules en la carpeta, que almacena los complementos que necesitamos.
Configuración
En términos generales, use plantillas directamente como archivos de configuración.
módulo.exports = function (grunt) {"use estrict"; grunt.initconfig ({// área de configuración del complemento}); // Cargue las tareas de complemento, agregue a quien quiera usar Grunt.LoadnpmTasks ('Grunt-Contrib -uglify'); Grunt.LoadnpmTasks ('Grunt-Contrib-Cssmin'); grunt.loadnpmtasks ('Grunt-Contrib-imagemin'); // registrar tarea grunt.registerTask ('predeterminado', ['cssmin', 'imagemin', 'uglify']);};Grunt.LoadNPMTasks () es una tarea de complemento de carga. De hecho, si desea usar la función de qué complemento, use este código para agregar la tarea de complemento en esta parte.
Grunt.RegisterTask () es una tarea registrada, y hay un valor predeterminado por defecto. El valor predeterminado significa que cuando lo usa por última vez, puede ingresar directamente a Grunt en el símbolo del sistema en el directorio para ejecutar la tarea registrada, que es equivalente a ejecutar la tarea predeterminada.
Uso de tareas personalizadas
Se pueden registrar más comandos de tareas y se pueden usar otros nombres. Por ejemplo
Grunt.RegisterTask ('Custom', ['cssmin', 'imagemin']);Al usarlo, ingrese:
Gruñido de costumbre