Share
En este tutorial, veremos cómo usar Grunt, específicamente para ayudar y acelerar su flujo de trabajo de desarrollo de WordPress.
Grunt es un corredor de tareas JavaScript instalado a través de NPM que se ejecuta en su servidor. Para utilizar la información de este tutorial, necesitará acceso a la línea de comandos a un servidor. Para mayor brevedad, le remito a este tutorial para que Grunt esté en funcionamiento y listo para su uso..
Grunt es un corredor de tareas comprobado, que se utiliza de muchas maneras diferentes, en muchas plataformas diferentes. Aquí, veremos cómo definir una base sólida en la que basar su desarrollo de WordPress.
La comunidad de Grunt es increíblemente fuerte, lo que ha llevado al desarrollo de un inmenso catálogo de complementos. Es fácil perderse y pasar mucho tiempo buscando y vetando cuáles usar.
¿Cuáles son algunas de las tareas comunes que cualquier tema o complemento de WordPress debe cumplir o proporcionar??
Grunt tiene un paquete de localización específico de WordPress muy exitoso llamado grunt-wp-i18n. Este paquete Grunt tiene un valor incalculable, ya que escaneará su carpeta de tema / complemento, encontrará todas las cadenas de traducción y compilará un .maceta archivo en la ubicación especificada. Esta .maceta archivo puede ser utilizado para convertir .correos y .mes archivos para otros usuarios para traducir su tema / plugin.
Para configurar el paquete, agregue lo siguiente a su Gruntfile.js initConfig opciones:
makepot: target: options: include: ['path / to / some / file.php'], escribe: 'wp-plugin' // o 'wp-theme'
A continuación, llame a la tarea Grunt así (mientras que en la Gruntfile.js carpeta):
gruñido makepot
Su carpeta completa está siendo escaneada y todas las cadenas cumplieron con un archivo de bote.
Todos los temas y complementos utilizan regularmente archivos JavaScript y CSS. Desafortunadamente, muchas veces se pasa por alto la necesidad de versiones de desarrollo y producción de los archivos..
Tomando señales de WordPress en sí, me propongo asegurarme de que he comentado y minimizado los archivos completamente:
Accentsconagua
filename.jsnombredearchivo.min.jsnombre de archivo.cssnombredearchivo.min.css¿Por qué? Me gusta saber qué sucede en esos archivos, pero también me gusta saber que mis visitantes reciben versiones optimizadas de los archivos..
Para hacerlo sin alguna forma de corredor de tareas, esto significaría cambiar las URL de activos registradas en WordPress durante el desarrollo para ver la versión modificada y no modificada, usar alguna forma de JavaScript y el compresor CSS antes de lanzar una actualización, y luego volver a activar las URL registradas. . Y eso no es divertido.
Con Grunt, puedes usar el paquete Uglify para minimizar y optimizar archivos de JavaScript sobre la marcha, y para ir más lejos en CSS, también podemos usar la tarea Sass para compilar archivos de Sass en CSS sobre la marcha. Para lo que vale, uso Sass porque eso es lo que WordPress usa debajo del capó, pero también hay un compilador MENOS para Grunt, también.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> nombredearchivo.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', informe:' gzip ', archivos: ' asset / js / filename.min.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / a / otro / archivo.js ',' activos / dinámico / rutas / ** / *. js '], dev: opciones: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellecer: verdadero, comprimir: falso, mangle: falso, archivos: ' asset / js / filename.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / a / otro / archivo.js ',' activo / dinámico / rutas / ** / *. js '] sass: dist: opciones: banner: '/ *! <%= pkg.name %> <%= pkg.version %> nombredearchivo.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', estilo:' comprimido ', archivos: [expand: true, cwd:' asset / scss ', src: [' * .scss '], dest:' asset / css ', ext:' .min.css '], dev: opciones: banner:' / *! <%= pkg.name %> <%= pkg.version %> nombre de archivo.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', estilo:' expandido ', archivos: [expand: true, cwd:' asset / scss ', src: [' * .scss '], dest:' asset / css ', ext:' .css '] Consejo: si usa la tarea sass agregue .sass-cache para usted .gitignore para evitar que la memoria caché del compilador se agregue a su repositorio.
Hemos cubierto dos áreas clave Grunt puede ayudar en el desarrollo de WordPress, pero vamos a dar un paso más y encontrar el poder adicional en el uso de un corredor de tareas.
Ya estamos proporcionando tareas para trabajar en archivos, ¿por qué no optimizarlo? Con la tarea anterior, tendríamos que ejecutar gruñido *** Cada vez que realizamos un cambio, ¿por qué no instalamos el paquete grunt-contrib-watch? Una vez configurado, esto le indicará a Grunt que ejecute esas tareas cada vez que se detecte un cambio de archivo.
reloj gruñido
¡Presto! No más ejecutar Grunt en cada cambio de archivo, simplemente inicie el observador y edite sus archivos.
¿No sería bueno ejecutar JSHint en nuestros archivos JavaScript para rastrear esos errores o puntos y comas que faltan? Simplemente instale la tarea grunt-contrib-jshint y la tarea del observador antes de compilar los archivos. Ahora Grunt le avisará de cualquier error y dejará de ejecutar más tareas..
jshint: files: ['asset / js / filename.js', 'asset / dynamic / paths / ** / *. js'], opciones: expr: true, globals: jQuery: true, console: true, módulo: verdadero, documento: verdadero
Esto ha sido especialmente útil para mí al desarrollar el Marco Fluent. Fluent Framework es un conjunto de clases que, entre otras cosas, crean páginas de opciones y metacuadros..
Para facilitar el desarrollo de campos individuales, tengo una estructura de archivos como esta:
activos / ├── js / | ├── filename.js ├── campos / ├── texto / | ├── js / | ├── text.js ├── select / ├── js / ├── select.js
Esto hace que sea realmente fácil encontrar el campo en el que estoy trabajando y modificar solo el JavaScript necesario para ese campo.
Desde el punto de vista del usuario, solo quiero servir un único archivo JavaScript con todo el JavaScript común y basado en campo combinado. Usemos la tarea grunt-contrib-uglify para lograr esto.
uglify: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> nombredearchivo.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', informe:' gzip ', archivos: ' asset / js / filename.min.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / a / otro / archivo.js ',' activos / dinámico / rutas / ** / *. js '], dev: opciones: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellecer: verdadero, comprimir: falso, mangle: falso, archivos: ' asset / js / filename.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / a / otro / archivo.js ',' activo / dinámico / rutas / ** / *. js '] Con esta configuración, después de que pase JSHint, combinará todos los archivos JavaScript en un archivo de desarrollo y un archivo de producción..
WordPress.org requiere una Readme.txt archivo que detalla la información del tema / complemento, pero los sistemas de control de versiones como GitHub y BitBucket prefieren Léame.md archivos. No necesitamos duplicar manualmente ni mantener estos archivos sincronizados. Dejemos que Grunt haga eso por nosotros.!
Instale la tarea grunt-contrib-copy y configúrela como tal:
copy: dist: src: 'readme.txt', dest: 'README.md'
Otra tarea útil de Grunt es el paquete Grunt cURL. Uno de los campos de Fluent Framework necesitaba acceso a los datos de la API de Google Fonts. Cargar esto como lo recomienda Google sería una solicitud HTTP cada vez que se carga la página. Alternativamente, si copia manualmente el contenido del archivo, corre el riesgo de quedar desactualizado. Lo mejor de ambos mundos es usar Grunt Curl para ahorrarnos una solicitud y obtener actualizaciones.
Para mantenernos actualizados, simplemente cargamos la tarea cURL, le dimos la URL para obtener datos de fuentes y dónde guardar la respuesta.
curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'asset / vendor / google -fonts-source.json '
Ahora, cada vez que ejecutamos la tarea, se descarga la última lista de fuentes y se guarda en el archivo de marco..
Esta tarea se utiliza mejor en temas, complementos y marcos en los que muchos ojos de desarrolladores estarán entrometidos. Y el contexto nunca es malo para aquellos que buscan en el código base..
PHP Documentor es una gran herramienta para generar automáticamente esos datos. También le ayuda a concentrarse en proporcionar DocBlocks significativos en su código.
phpdocumentor: dist: options: ignore: 'node_modules'
Sugerencia: Añadir docs para usted .gitignore Si no desea confirmar la documentación y todos sus archivos de caché.
Aquí está el paquete.json y el Gruntfile.js para las tareas detalladas arriba.
paquete.json
"name": "package-name", "version": "1.0.0", "description": "…", "main": "filename.php", "scripts": "test": "echo \ "Error: no se especificó la prueba \" && exit 1 "," repositorio ": " tipo ":" git "," url ":" http://repo-url.com "," keywords ": [ "wordpress"], "author": "Your Name", "license": "GPL", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-copy": "~ 0.5. 0 "," grunt-contrib-jshint ":" ~ 0.8.0 "," grunt-contrib-sass ":" ^ 0.7.3 "," grunt-contrib-uglify ":" ~ 0.3.3 "," grunt -curl ":" * "," grunt-phpdocumentor ":" ~ 0.4.1 "," grunt-wp-i18n ":" ~ 0.4.0 "
Gruntfile.js
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), copia: dist: src: 'readme.txt', dest: 'README.md' , curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'asset / proveedor / google-fonts-source.json ', makepot: target: options: include: [' path / to / some / file.php '], escriba:' wp-plugin '// o' wp -theme ', jshint: files: [' asset / js / filename.js ',' asset / dynamic / paths / ** / *. js '], opciones: expr: true, globals: jQuery : true, console: true, module: true, document: true, phpdocumentor: dist: options: ignore: 'node_modules', sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> nombredearchivo.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', estilo:' comprimido ', archivos: [expand: true, cwd:' asset / scss ', src: [' * .scss '], dest:' asset / css ', ext:' .min.css '], dev: opciones: banner:' / *! <%= pkg.name %> <%= pkg.version %> nombre de archivo.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', estilo:' expandido ', archivos: [expand: true, cwd:' asset / scss ', src: [' * .scss '], dest:' asset / css ', ext:' .css '], uglify: dist: options: banner:' / *! <%= pkg.name %> <%= pkg.version %> nombredearchivo.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', informe:' gzip ', archivos: ' asset / js / filename.min.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / a / otro / archivo.js ',' activos / dinámico / rutas / ** / *. js '], dev: opciones: banner:' / *! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', embellecer: verdadero, comprimir: falso, mangle: falso, archivos: ' asset / js / filename.js ': [' activo / ruta / a / archivo.js ',' activos / ruta / to / another / file.js ',' asset / dynamic / paths / ** / *. js ']); grunt.loadNpmTasks ('grunt-contrib-copy'); grunt.loadNpmTasks ('grunt-contrib-jshint'); grunt.loadNpmTasks ('grunt-contrib-sass'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-curl'); grunt.loadNpmTasks ('grunt-phpdocumentor'); grunt.loadNpmTasks ('grunt-wp-i18n'); grunt.registerTask ('default', ['jshint', 'uglify: dev', 'uglify: dist', 'sass: dev', 'sass: dist', 'makepot', 'copy']); grunt.registerTask ('docs', ['phpdocumentor: dist']); grunt.registerTask ('googlefonts', ['curl: google-fonts-source']); ; Sugerencia: Añadir nodo_módulos y npm-debug.log para usted .gitignore para evitar que las tareas como archivos asociados se agreguen a su repositorio.
Como puede ver en las tareas anteriores, se puede usar Grunt para ayudar a automatizar el desarrollo de WordPress y darle más tiempo para centrarse en escribir código, no en gestionarlo.
Hemos detallado solo algunas tareas para WordPress, pero existen muchos otros paquetes para necesidades específicas del proyecto, como tareas de optimización de imágenes y mucho, mucho más, así que vaya a explorar!
Grunt ahora es un corredor de tareas bien establecido, y la documentación está a la par con WordPress, ¿por qué no considerar hacer una tarea que aún no se haya pensado y compartirla con la comunidad??
