Share
En la primera publicación de esta serie, proporcioné una descripción general rápida de Grunt y en la siguiente publicación, le mostraré los pasos necesarios para que Grunt pueda mejorar sus habilidades de desarrollo de WordPress..
Específicamente, hablaremos en profundidad sobre los archivos necesarios como paquete.json y Gruntfile.js, pero por ahora vamos a crear algunos archivos de muestra para que pueda ejecutar Grunt con su tema de WordPress o proyecto de complemento.
Antes de comenzar, puede ser útil revisar el contenido mencionado en el primer artículo de esta serie..
Una vez que esté al día, vuelva a este artículo y comenzaremos con la creación de nuestros archivos de proyecto. En última instancia, esto nos dará una visión general de cómo se ve configurado Grunt para un proyecto determinado..
En el siguiente artículo, veremos cómo hacer esto específicamente para el trabajo de WordPress, pero nos enfocaremos en un enfoque más genérico por ahora..
Lo primero que haremos es crear un paquete.json archivo en la raíz del proyecto. Dentro de ese nuevo archivo, agregue lo siguiente:
"name": "project-name", "version": "1.0.0", "description": "Awesome project"
No hay necesidad de añadir el Dependencias objeto, ya que se agregará automáticamente cuando instalemos las tareas de Grunt a través de la línea de comandos.
Para instalar las tareas de Grunt, debe cambiar a la herramienta de línea de comandos que elija. Si estás en una Mac, esto sería Terminal o iTerm. Si está en una PC, sugeriría usar PowerShell.
Primero navega a tu proyecto carpeta raíz ('cd development-folder / project-folder'). A continuación vamos a instalar una tarea para compilar archivos LESS. Vamos a instalar la tarea grunt-contrib-less, así que escriba lo siguiente en su línea de comando y presione Entrar:
npm install grunt-contrib-less --save-dev
Comenzará a ver un montón de líneas que se imprimen como la tarea y todas sus dependencias se descargan desde npm. Una vez hecho esto, deberías ver algo como esto:
Ahora deberías poder ir a tu paquete.json archivar y ver gruñido-contrib-menos añadido a tu 'devDependencies' objeto también. También agregará el número de versión junto al nombre. Podría hablar sobre la notación de la versión en otro post, pero por ahora, sepa que tilde Se refiere a la versión con la que estamos trabajando actualmente..
En este punto, debería ver lo siguiente:
"name": "project-name", "version": "1.0.0", "description": "Awesome project", "DevDependencies": "grunt-contrib-less": "~ 0.9.0"
A continuación, agreguemos una tarea para observar los cambios en nuestra '.Menos' archivos. Vamos a utilizar la tarea grunt-contrib-watch. Salta de nuevo a la línea de comando y pulsa Entrar:
npm instala grunt-contrib-watch --save-dev
Una vez más, debería ver algunos resultados en la pantalla y una vez que esté completa, se agregará a su paquete.json expediente. Ahora debería verse algo como esto:
"name": "project-name", "version": "1.0.0", "description": "Awesome project", "DevDependencies": "grunt-contrib-less": "~ 0.9.0", "grunt-contrib-watch": "~ 0.5.3"
Esperemos que ahora ya lo hayas aprendido y puedas usar el mismo proceso para agregar otras tareas de Grunt. Sólo un recordatorio para siempre adjuntar el '--save-dev'.
Ahora que tenemos un par de tareas Grunt instaladas, comencemos a usarlas. Lo primero que tendremos que hacer es crear un Gruntfile.js archivo en la carpeta raíz de nuestro proyecto. Aquí es donde vamos a especificar nuestras tareas y configurarlas..
Para hacer esto, agregue lo siguiente al archivo:
module.exports = function (grunt)
Lo primero que debemos hacer es cargar nuestras tareas para poder ejecutarlas. Usted hace esto agregando usando el loadNpmTasks Función para cada tarea. Por favor agregue lo siguiente dentro de las llaves:
grunt.loadNpmTasks ('grunt-contrib-less');grunt.loadNpmTasks ('grunt-contrib-watch');
Lo siguiente que debemos hacer es configurar la configuración para nuestras tareas Grunt instaladas. Necesitamos usar el initConfig funciona así:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),);
Ahora, después de la coma, agregaremos nuestra configuración para cada tarea que instalamos. Por lo general, encontrará ejemplos de cómo configurar cada tarea en el README.md Archivo en el proyecto en GitHub. Cada tarea tendrá diferentes opciones de configuración, así que asegúrese de consultar primero la documentación.
La primera tarea que vamos a configurar es la gruñido-contrib-menos tarea. Éste compilará nuestro .Menos archivos en .css archivos para nosotros. Usted querrá crear una nueva carpeta para su .Menos archivos y crear uno nuevo. Normalmente creo un css / menos carpeta y poner toda mi .Menos archivos allí.
Continúa y agrega un nuevo archivo llamado style.less y añade algo de código en él así:
a color: azul; &: hover color: rojo;
Ahora, volvamos a nuestra Gruntfile.js archivo y añadir lo siguiente:
Menos:
opciones:
caminos: 'css / menos',
yuicompress: true
,
archivos:
'style.css': 'css / less / style.less'
Una vez que guarde el archivo, debería poder pasar a la línea de comandos y escribir gruñir menos y golpear Entrar. Esto iniciará la tarea y compilará .Menos archiva y crea un nuevo style.css archivo en nuestro proyecto carpeta raíz.
Ahora que tenemos una tarea para compilar nuestros .Menos archivos, vamos a añadir una tarea de vigilancia para ello. ¿Quién quiere ir a la línea de comandos y correr? gruñir menos Cada vez que hacemos cambios en un archivo, a la derecha.?
Después de nuestra configuración anterior, agregue una coma y luego lo siguiente:
reloj:
Menos:
archivos: 'css / less / *. less',
tareas: 'menos'
Una vez que guarde el archivo, regrese a la línea de comandos y escriba reloj gruñido. Esto debería ver lo siguiente:
Esto significa que el reloj Grunt está esperando cualquier cambio en uno de los archivos que especificó en su configuración. Ir a tu style.less archivar y hacer un cambio como tal:
a color: azul; &: hover color: verde;
Una vez que guarde el archivo, la tarea de observación comenzará y compilará su .Menos archivos en su style.css expediente. Una vez que se complete, seguirá viendo esos archivos y listo para otro cambio..
Ya que se está ejecutando, todo lo que necesita hacer ahora es hacer un cambio en un archivo, guardarlo y luego voltear a su navegador para ver los cambios.
Ahora tenemos todo en su lugar para usar Grunt con su próximo proyecto. Esta fue una configuración bastante simple y estoy seguro de que puede ver todas las tareas posibles que puede tener en su proyecto. Más adelante en la serie, estoy planeando cubrir funciones más avanzadas con Grunt, como tareas personalizadas, configuración anidada y otras mejoras..
Pero primero, veremos cómo incorporar esto en nuestros proyectos de WordPress.
Accentsconagua