Share
En la primera parte de esta serie, di una visión general rápida de Grunt. También hablé a través de las diferentes tecnologías que requiere para su uso. Después de eso, me metí un poco en el Gruntfile y las tareas dentro de él.
Ahora quiero hablar sobre cómo el uso de Grunt puede mejorar su desarrollo para los temas y complementos de WordPress.
Mi parte favorita sobre el uso de Grunt y npm es que a medida que configura su proyecto, se auto-documenta las dependencias de su proyecto. Esto es ideal para equipos de desarrollo y proyectos de código abierto. ¿Quién quiere escribir la documentación sobre cómo configurar un área de trabajo de todos modos, a la derecha?
Primero, deberá tener un archivo package.json en su proyecto. Deberá configurar el nombre, la versión y la descripción del proyecto. Vamos a entrar en más detalles sobre esto en la próxima publicación, pero aquí hay un ejemplo:
"nombre": "nombre del proyecto",
"version": "1.0.0",
"description": "Awesome project"
Una vez que haya configurado esto, cuando instale un complemento de grunt, solo necesita agregar --save-dev hasta el final y agregará el complemento a su archivo package.json bajo Dependencias. Por ejemplo, si quisiera añadir el gruñido-contrib-reloj Complemento a mi proyecto ejecutaría el siguiente comando:
npm instala grunt-contrib-watch --save-dev
Verá el complemento agregado a su nodo_módulos carpeta y también debería dar como resultado que su archivo package.json se vea así:
"nombre": "nombre del proyecto",
"version": "1.0.0",
"description": "Awesome project", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Al instalar otros complementos de Grunt y agregar --save-dev hasta el final, los verás añadidos bajo el Dependencias objeto.
¿Por qué es esto beneficioso? Como mencioné anteriormente, esto es auto-documentar las dependencias de sus proyectos. Una vez que haya instalado y agregado todos sus complementos a su archivo package.json, ahora puede ejecutar otro miembro del equipo o colaborador npm instalar e instalarán todo lo necesario para el proyecto..
Puedes probar esto fácilmente eliminando tu entero nodo_módulos carpeta y funcionando npm instalar tú mismo. Verás todo lo que configures instalado automáticamente.
[nota] Usted querrá agregar el nodo_módulos carpeta a tu .gitignore archivo para que no hinche su repositorio. [/ note]
Utilizo muchos complementos Grunt similares en cada proyecto, pero el que siempre instalo es el que mencioné anteriormente, grunt-contrib-watch. Este complemento cuando se ejecute observará los archivos de su proyecto y dará inicio a cualquier tarea que haya especificado para ese archivo o tipo de archivo.
Un ejemplo sería para cualquiera de sus archivos JavaScript. Cuando realiza cambios en uno de ellos y lo guarda, entonces puede hacer que Grunt ejecute una tarea JSLint, concat y minify. También puede especificar un orden, de modo que cuando uno tiene éxito, el siguiente se inicia. Si uno falla, entonces mata toda la secuencia de tareas.
CodeKit tiene una característica similar, pero ejecuta todas tus tareas. Por ejemplo, si realiza un cambio en un archivo SASS o LESS, no solo inicia esas tareas, sino que también inicia sus tareas de archivos JavaScript. La tarea de vigilancia de Grunt le da más control sobre qué tareas se ejecutan cuando se cambian archivos específicos o tipos de archivos.
Junto con las tareas de Grunt para los complementos que instala, puede crear sus propias tareas personalizadas. Muchas veces cuando configuro un proyecto tengo 3 tareas que configuro, defecto, preparar, y construir.
La tarea predeterminada es la tarea que se ejecutará con usted ejecutar gruñido desde la línea de comando. Muchas veces mapearé mi tarea de reloj al valor predeterminado. Puedes agregar cualquier tarea que quieras ejecutar también.
La tarea de configuración que configuro generalmente hace las cosas que solo deben suceder la primera vez para configurar la configuración de su proyecto. Muchas veces uso Bower para cargar bibliotecas de terceros como Bootstrap y necesito bajarlas y luego ejecutar una tarea de copia para mover algunos archivos a mi proyecto y luego iniciar una compilación inicial de los archivos LESS y JavaScript..
La tarea de compilación se utiliza para realizar las tareas necesarias antes de lanzar o distribuir su proyecto. Siempre ejecuto esto para asegurarme de que todo esté concatenado, minimizado y comprimido. Un gran ejemplo es ejecutar grunt-contrib-imagemin para optimizar todas las imágenes en su proyecto. Otro ejemplo es el uso de grunt-contrib-compress para crear un archivo zip de su tema para que sea fácil de instalar a través del administrador de WordPress.
Grunt es definitivamente una gran herramienta para equipos de desarrolladores. Desde la documentación automática de las dependencias de su proyecto hasta la construcción personalizada, Grunt lo hace eficiente. Utilice Grunt para automatizar diferentes tareas en su proyecto para que pueda concentrarse en la creación de su tema o complemento de WordPress.
Accentsconagua