Acelerar el desarrollo del tema con Gulp

Antes de empezar, déjame hacerte una pregunta. ¿Cuál es la tarea más común que hace al desarrollar un tema de WordPress (o cualquier tipo de sitio web realmente)? ¿Qué haces con tanta frecuencia que ni siquiera te das cuenta de que si está en tu memoria muscular? Actualiza el navegador. (No espere esto), ¿qué está pasando si le dije que esto puede automatizarse y que el navegador puede actualizarse automáticamente cada vez que realiza un cambio de archivo? Con Gulp, es fácil. Y no solo la actualización, puede automatizar la compilación SASS, la combinación de archivos, las verificaciones de sintaxis, la implementación, como lo desea.
Entonces, en este tutorial, le mostraré cómo configurar Gulp y algunas tareas comunes que los desarrolladores de temas realizan a diario. Requisitos preliminares Todos los componentes que utilizaremos en este tutorial se basan en Node.js, que es el único requisito. Viene con un administrador de paquetes llamado, sin ser sorprendente, administrador de paquetes de nodo o en breves npm. Instale el nodo y luego ejecute $ npm -v para asegurarse de que funcione correctamente (le dará el número de versión). Por supuesto, también debe tener un tipo de entorno de desarrollo para WordPress, ya sea VVV, HGV, MAMP o cualquier otro sabor ambiental. Si puede ejecutar WordPress, está listo.
También necesitará una extensión de Liveroad para el navegador en el que se desarrolla. También es aconsejable tener al menos el duro de SASS/SCSS (la diferencia está en la sintaxis, por lo que podría elegir cualquiera de los nombres continuos) Nota: Para el propósito de este tutorial, configuraré un subrayado vacío, pero lo haré No dude, agregue las cosas que está a punto de aprender a la existente: no puede hacer ningún daño. ¿Qué es Gulp? El sitio oficial dice que es el sistema de flujo el que solo son palabras de lujo para lo que es esencialmente un gerente de actividades. Y a través de tareas quiero decir cualquier cosa que tenga que hacer manualmente y que pueda automatizarse (excepto por escribir el código, es decir, no puede evitar esto). Algunas de las tareas más comunes que realiza al construir un tema de WordPress: Compare Sass en CSS (si lo usa)
Compare Coffeescript en JavaScript (si lo usa)
Minimiza, concatene o Scames (la línea es un proceso de verificación del código del código) CSS y JavaScript
Optimización de imágenes
Crear, eliminar o archivar archivos y carpetas
Siga los archivos para obtener cambios y …
Actualice el navegador si se cambia un archivo, una tarea más comúnmente conocida como Livereload. Adiós CMD + R.
Desde una perspectiva más técnica, Gulp es un paquete NPM (que acepta complementos), lo que significa que necesita Node.js para ejecutar.
Lo que es Bower como Gulp, Bower (inicialmente desarrollado en Twitter) también es un paquete NPM que administra los paquetes de frontend y sus adicciones para usted. ¿Qué es un paquete delantero? JQuery es. La mayoría de los complementos de JQuey también son: casi todas las bibliotecas de JavaScript que se ejecutan en el navegador y generalmente vienen con un archivo CSS (o más) es un paquete de mano delantera. También es mi estándar de calidad personal; Si una biblioteca JavaScript también es un paquete NPM, generalmente significa que el autor sigue las prácticas y enfoques modernos. No siempre, pero a menudo. En nuestra página de destino, por ejemplo, usamos jquey y un complemento de control deslizante (no lo confundas con complementos de WordPress) llamado Slick (para testimonios). ¿El problema que Bower resuelve? Dependencias y superación de esas bibliotecas/paquetes. Puede ejecutar fácilmente la actualización de $ Bower y asumir automáticamente las últimas versiones. Porque me importa. Y deberías. Instalar Gulp Gulp requiere dos archivos iniciales para ejecutar: paquete.json y gulpfile.js, por lo que ejecutaremos el script init que crea el primero (lo último tendrá que crearlo manualmente): $ npm init. Le hará una serie de preguntas (solo presione Entrar si no lo sabe o no está seguro) que se transformará en una configuración de JSON y se guardará en paquete.json. Después de una limpieza, mi versión inicial se veía así:
{“Nombre”: “Kickstart”, “Versión”: “1.0.0”, “Descripción”: “Subsensores, mejorado con Gulp Workflow”, “Main”: “GulpFile.js”, “Autor”: “Tomaz Zaman “} Ahora, necesitamos la instalación de Gulp, por lo que de acuerdo con su documentación, ejecute la instalación de $ npm-Save-Dev Gulp. Ahora que Gulp está instalado, cree un archivo en el directorio raíz del tema, llamado gulpfile.js e ingrese lo siguiente: var gulp = require (‘gulp’); gulp.task (‘default’, function () {}); Para probar si Gulp se instala correctamente, ejecute $ Gulp: ejecutará la carga predeterminada (que no hace nada por el momento), luego saldrá. Antes de instalar cualquier paquete Gulp, debemos pensar en qué tareas queremos automatizar :
Uso Sass, por lo que necesitamos un preprocesador para hacer CSS
Tiendo a separar JavaScript en varios archivos (para mayor claridad y organización) y quiero obtener un archivo minimizado
Me gustaría saber si mi JavaScript respeta las mejores prácticas
Me gusta que el navegador se actualice automáticamente mientras codificaba.
Quiero que Gulp continúe funcionando cuando aparezcan errores (se agotan por defectos)
Estos son los requisitos básicos y algunos requieren más de un paquete, por ejemplo, necesita un monitor que active el LiverElad cuando cambie un archivo.
Instale a todos a partir de un solo movimiento de movimiento este comando: $ npm-save-save-defle-bulp-bitter-watch-watch-hivereload gulp-minify-css gulp-jshint gulp-gulp-gulp-rename gulp- notify gulp- gulp- gulp- gulp- gulp- gulp- gulp- Incluya Gulp-Sass (no se preocupe si nunca ha oído hablar de estos paquetes, quedará claro pronto) Configure Gulp Open GulpFile.js, donde gastaremos el resto de este tutorial. En la parte superior, debemos solicitar todos los paquetes que hemos instalado en el paso anterior, por lo que se mantiene esto en: var gulp = request (‘gulp’), plumbber = request (‘gulp-plumber’), watch = request (” Gulp-Watch ‘), Livereload = require (‘ Gulp-Livereload ‘), minifyCSS = request (‘ gulp-minify-css ‘), jshint = request (‘ gulp-jshint ‘), stylish = request (jshint-sylish’) , uglify = reequire (‘gulp -uglify’), rename = reequire (‘gulp-rename’), notify = reequire (‘gulp-notify), incluye = reequire (‘ gulp-include ‘), sass = request (‘ gulp -Hablar con descaro a’); Entonces es hora de definir los errores predeterminados (Gulp-Plaumber depende de ello):
lima onError = function (err) {console.log (‘ocurrió un eroror:’, err.mesage); this.emit (‘End’); } Y ahora, finalmente, nuestra primera tarea que compilará SASS en el CSS habitual (aún no lo escriba a mano, ¿verdad?): Gulp.Task (‘SCSS’, function () {return gulp.src (./scsss /Style.scss ‘) .Pipe (plomero ({ErrorHandler: onError}) .Pipe (sass ()) .pipe (gulp.dest (‘. ‘) .Pipe (minifycss ()) .pipe (rename ({sufix: ‘.Min’})) .Pipe (Gulp.Dest (‘.’) .Pipe (LiverElad ());}); Nota: No se preocupe si no sabe qué hacen los tubos, dentro es una función de transmisión de datos (en nuestros archivos de caso) mientras realiza ciertas operaciones en esos datos en cada paso. Veamos esta tarea que la definí; En primer lugar, le decimos que tome style.scss, lo registramos en el instalador (si nuestro sass tiene errores de sintaxis), lo compilamos en el CSS habitual con sass () y finalmente lo escribimos en la corriente del directorio. Aunque podríamos parar aquí, agrego para fines educativos: unos pocos pasos adicionales; Después de guarda de estilo.css, lo pasa a través de un minificador, lo renombra en style.min.css, lo guarda y luego recarga el navegador. Hasta hace unos meses, usé Compass para compilar a Sass, pero es muy lento, por eso fui a Libsass, una opción loca pero ligeramente defectuosa. No tiene que preocuparse por eso, porque se instala automáticamente con el comando Gulp anterior, por lo que si no ve ningún error, ya está funcionando correctamente.
Antes de que podamos probar si esta tarea funciona, necesitamos el archivo /scss/style.scss, con el siguiente ejemplo de contenido: $ color: #36A9E1; Cuerpo {fondo: $ color; } Ahora, el momento de la verdad. Ejecute $ Gulp SCSS y debería ver su tarea creando dos archivos en la carpeta raíz: style.css y style.min.css. Abra este último para ver todos los espacios y comentarios eliminados, lo que coloca en la cola en WordPress depende de si hace una minificación del servidor o no. Probablemente no desee ejecutar esta tarea cada vez que actualice un archivo SASS, por lo que configuraremos la tarea de reloj: gulp.task (‘watch’, function () {livereload.liste (); gulp.watch (‘ . /scss/**/*.scss ‘, [‘ scss ‘]); gulp.watch (‘ ./**/*.php ‘) .on (‘ Change ‘, function (file) {livereload.chaged ( archivos);});}); Como último paso, cambie la tarea predeterminada para verse así: gulp.task (‘default’, [‘scss,’ watch ‘], function () {});
¿Notas las dos tareas entre los soportes correctos? Estas se denominan tareas dependientes y se ejecutarán antes de la tarea en la que se los llaman para realizar. Para probar si todo funciona correctamente, ejecute $ Gulp (continuará ejecutándose hasta que presente presionando CTRL + C), abra el sitio de WordPress y asegúrese de activar la extensión de Livereload. Abra el ejemplo del archivo CSS que creé anteriormente, cambie el color a #78A30D y guarde el archivo. Si el fondo ha cambiado de azul a verde sin que la página sea refrescante, toque la espalda, ¡el trabajo bien hecho! Nota: Para evitar que este tutorial sea más largo, deliberadamente omití el procesamiento de JavaScript. Pero no tengas miedo, creé una idea con eso incluido. ¿Pero Bower? Instale la versión SASS de Normalize.css a través de Bower. Al igual que con Gulp, debe inicializar el proyecto ingresando este comando en el directorio raíz del tema: $ Bower Init. Una vez más, algunas preguntas, podría presionar para entrar a través de todo y editar Bower.json creado. Así es como se ve el mío: {“Nombre”: “Kickstart”, “Versión”: “1.0.0”, “Autores”: [“Tomaz Zaman “], “Descripción”: “Subscribe + Gulp + Bower “,” Licencia “:” MIT “,” Ignorar “: [” **/.*”,” Node_Modules “,” Bower_Components “,” Prueba “,” Prueba “]} Luego instale Normalize: $ Bower Install – – -Save-Dev Normalize-SCSS e importe el nuevo archivo instalado en la hoja de estilo SASS principal (scss/style.scss), de modo que se vea así: @import “../bower_components/normaly-scss/_normalice.scss” ;