Uso de Gulp para acelerar el desarrollo de WordPress

Las herramientas de construcción permiten a los desarrolladores centrarse en un desarrollo efectivo, en lugar de los detalles esenciales que le toman la mitad de su vida, pero no agregan mucho a su propio proyecto. Tal herramienta de construcción es Gulp. Gulp optimiza las imágenes de su tema, concisiona sus archivos JS y procesa automáticamente su código SASS/MENOS. En este artículo, le mostraré cómo comenzar y cómo puede usar Gulp para acelerar su proceso de desarrollo. ¿Qué es Gulp? Gulp es una herramienta de compilación basada en JavaScript que utiliza el nodo para automatizar las tareas triviales. La idea básica es crear desencadenantes que realicen una cierta acción.
Por ejemplo, cada vez que guarda un archivo SASS, se compila en un archivo CSS que especifica. O cada vez que guarde un archivo JS, todos los archivos JavaScript se concatenan en un solo archivo, y ese archivo se reduce. Suena bien, ¿cómo empiezo? Necesitará Node para ejecutar Gulp. Esto debería ser fácil, solo tiene que visitar NodeJs.org y descargar y ejecutar el programa de instalación. El nodo se instalará, junto con NPM (Knot Package Manager), que usará para hacerse cargo de los nudos, como Gulp.
El siguiente paso es instalar Gulp a nivel mundial. Puede hacer esto abriendo el terminal u pedido de pedido en Windows (ahora las llamaré en ambos terminales) y iniciando el siguiente pedido:
La idea f837d694d2dce6983166 está cargada
Esto instala la interfaz de línea de comandos Gulp para que pueda iniciar comandos Gulp en cualquier lugar. También debe instalar Gulp para su proyecto específico. Esto se debe a que cada proyecto tendrá diferentes requisitos. ¡No minimizará los mismos archivos, no usará la misma estructura, es posible que ni siquiera use WordPress o PHP para todos sus proyectos! Pero antes de hacerlo, hable sobre WordPress por un momento. El uso de herramientas de construcción de WordPress La mayoría de nuestros esfuerzos harán una de dos cosas: modificar los archivos existentes o crear nuevos archivos basados ​​en los existentes. Muchos de los archivos que utilizamos para el desarrollo no se utilizarán en el producto final. Si creamos un tema usando SASS para la hoja de estilo, el archivo CSS final es lo que se entregará como parte del tema, porque los archivos SASS originales no son necesarios. Hay dos enfoques que puede tomar:
Proporcionar archivos de desarrollo dentro de su proyecto
Omitir todos los archivos relacionados con el desarrollo
Estructuras de proyectos

Proporcionar archivos de desarrollo La ventaja es que hará felices a los desarrolladores, y podrán expandir su trabajo con más precisión y con un mayor grado de libertad. La desventaja es que la presencia de estos archivos puede confundir algunos y es posible que deba brindar asistencia para ellos. Para proyectos de código abierto, consideraría proporcionar todos los archivos de desarrollo, en cuyo caso pueden vivir en el proyecto principal.
Omitir los archivos de desarrollo La ventaja de omitir estos archivos es que elimina la confusión y hace que las descargas sean más pequeñas. Los archivos de desarrollo de codificación generalmente no agregan una gran sobrecarga, pero si trabaja con muchas imágenes grandes o archivos de texto, esto podría ser un problema. La desventaja es que solo usted podrá trabajar con los archivos originales. En algunos proyectos, esto se consideraría una ventaja, por lo que debe elegir cualquiera que funcione para usted. Aquí los archivos están fuera de la carpeta final entregable. Instalar GULP para nuestro proyecto Nuestro proyecto de prueba será un tema simple y proporcionaremos nuestros archivos de desarrollo, por lo que utilizaremos la estructura a la izquierda de la imagen de arriba. Instale Gulp en el directorio principal de su sitio navegando al Director de la Terminal y lanzando el siguiente pedido: Cargue la idea F837D694D2DCE6983166
El siguiente paso es crear un GulpFile. Este es un archivo JavaScript que le dice a Gulp qué hacer y cuándo hacerlo. Cree gulpfile.js en la carpeta principal con el tema e inserte el siguiente contenido en él:
La idea f837d694d2dce6983166 está cargada
La línea inicial establece que necesitamos tragar en sí. La siguiente sección define una tarea Gulp. Esto podría ser cualquier cosa, desde la mini -optimización de la imagen, por ahora me he quedado en blanco. Una vez que haya guardado este archivo, vuelva al terminal y inicie un solo comando: Gulp. Si no se especifica nada más, se ejecutará la tarea definida definida en el archivo GULP. Definí esta tarea, pero no tiene contenido, por lo que solo comienza y termina, debería ver algo así en su terminal:
Ejecutando una carga de trago vacía
Creación de tareas La mayoría de las tareas comenzarán con un archivo de origen (o un solo archivo), manipularlas y eliminar el resultado en un archivo diferente. Sass/Less podría ser el ejemplo más obvio, así que comencemos procesando un archivo SASS. Para realizar una acción, necesitará encontrar el módulo Gulp correcto. Esto es bastante fácil, escriba “Gulp Sass” en Google y encontrará lo que necesita, un paquete llamado para tomar una acción, deberá encontrar el módulo Gulp correcto. Esto es bastante fácil, escriba “Gulp Sass” en Google y encontrará lo que necesita, un paquete llamado Gulp-Sass. El Pagina NPM de cada paquete tiene instrucciones sobre la instalación y el uso. Además de los comandos específicos para cada módulo, los pasos son casi siempre los mismos:

Instalar el paquete
Incluir el paquete
Úselo en Gulpfile
Puede instalar Gulp-Sass iniciando el siguiente comando en el terminal:
La idea f837d694d2dce6983166 está cargada
Luego cree una variable en la parte superior del archivo GULP que usaremos más adelante:
La idea f837d694d2dce6983166 está cargada
¡Ahora estamos listos para crear una tarea! Permítame mostrarle el código completo y agregar a continuación la explicación:
La idea f837d694d2dce6983166 está cargada
Comencé definiendo una tarea llamada “sass”. Esta tarea adquiere un archivo fuente (archivo style.sass en desarrollo/estilos), lo procesa y lo escribe en el archivo style.css en la carpeta principal. La mayoría de estos se realizan utilizando la función Pipe (). La tubería es la columna vertebral del trago, transporta datos entre las diferentes funciones.
En este flujo comenzamos con el contenido de un archivo fuente. El contenido se transmite a la función sass (). Esto se encarga de todo el procesamiento de SAS y escupe algo (el CSS final). Este contenido se transmite aún más a la función Dest () que define dónde está escrito el archivo. Tomará el nombre del archivo original, por lo que llegaremos con style.css como producto final. Para ejecutar esta tarea, ejecute Gulp Sass en la terminal. Minimizar archivos otra tarea común es reducir los archivos. Una vez que creamos style.css, podríamos hacerlo mucho más pequeño, haciendo que nuestro tema sea más eficiente. Seguiremos el mismo proceso que antes, comenzando con Google “Gulp Minify CSS”. Debe encontrar Gulp-Minify-CSS. Instálelo con la instalación de NPM: Save-Dev Gulp-Minify-CSS e incluya en la parte superior de su archivo Gulp usando var minifycss = request (‘gulp-minify-css’); Una vez que todo está configurado, podemos agregarlo a nuestra tarea SASS. Simplemente debemos dirigir nuestro contenido a la función de minifificación después de que el módulo SAS haya hecho su trabajo, aquí está la tarea completa:

La idea f837d694d2dce6983166 está cargada
Un truco que me gusta usar es agregar opciones KeepSpecialComments. Por defecto, todos los comentarios serán eliminados, pero nuestro tema no es un tema real a menos que tenga un comentario de encabezado en el archivo style.css. Estos casos son exactamente por qué existe la opción de comentarios especiales. Agregue un signo de exclamación después de abrir el comentario ( /*) para hacer un comentario especial, aquí hay un encabezado completo para usted:
La idea f837d694d2dce6983166 está cargada
Archifique la concatenación para dirigir nuestra atención a la concatenación que nos permite combinar múltiples archivos en uno. Esta técnica generalmente se usa para archivos JavaScript. Me gusta usar Gulp-Include porque me da más control. Hasta ahora debería poder instalarlo e incluir, vaya directamente a su uso. En lugar de hacer muchos archivos que ofrecen un destino de origen y una ubicación de salida, usaré un archivo JS central como intermedio. En este archivo, podré definir qué archivos quiero concisos y también agregaré el código JS habitual. En la carpeta de desarrollo/Escrituras, crearía un archivo scripts.js, que se vería así: la idea f837d694d2dce6983166 está cargada
Gulp-Include me permite usar las instrucciones incluir que vea al comienzo del archivo para extraer el código que se encuentra en esos archivos. Los primeros 6 son de Foundation, han configurado las necesidades de JavaScript del marco de la base. La última inclusión es un código para barras de menú pegajosas. Finalmente, agregué un código JavaScript normal que inicializará la base. Creemos una tarea de trago para que todo funcione:
La idea f837d694d2dce6983166 está cargada
Me dirigí al archivo Deveropment/scripts/scripts.js y lo envié al puesto que estará a cargo. El archivo de destino es la carpeta raíz, habrá un archivo scripts.js. Puede ejecutar esta tarea escribiendo scripts Gulp en el terminal. Ejecución de múltiples tareas hasta ahora, bueno, pero ahora solo tenemos automatización parcial y tenemos que ejecutar todo por separado. Resolvamos el segundo problema completando nuestra tarea predeterminada. Nuestra tarea predeterminada ejecutará nuestras tareas de scripts y estilos existentes. Este es un asunto simple. Así es como se verá nuestra tarea implícita final: la idea f837d694d2dce6983166 se verá
Es decir, continúe agregando tareas según sea necesario. Ejecute la tarea predeterminada usando el comando gulp. Mirando archivos para nuestro truco final, haremos todo esto se ejecuta automáticamente a medida que realicemos cambios. El propósito es que Gulp siga nuestros scripts y estilos y realice las tareas necesarias cuando cambian. Instale e incluya Gulp-Watch por su cuenta y luego cree una nueva tarea con el siguiente código:
La idea f837d694d2dce6983166 está cargada
Esta tarea contiene una función que define dos conjuntos de archivos rastreados. El primer conjunto seguirá todos los archivos con la extensión .SSCSS desde la carpeta/estilos de desarrollo. Cuando alguno de ellos cambie, se ejecutará la tarea de los estilos. El segundo conjunto seguirá todos los archivos con la extensión .js de la carpeta Development/Scritchure. Cuando alguno de ellos cambia, se ejecutará la tarea de script. Si ejecuta el reloj Gulp desde la terminal, debería ver que el embarazo comienza y termina, pero no sale y le permite ingresar a otra orden. Esto se debe al hecho de que los archivos se persiguen. Si guarda un archivo, verá que la tarea comienza y termina nuevamente. Esto continuará sucediendo hasta que cierre la ventana del terminal o presione el control+C para salir. Ahorre tiempo con herramientas de construcción Las herramientas de construcción como Gulp son extremadamente potentes y acabo de rascar la superficie aquí. Cualquiera que sea la ligera tarea aburrida con la que pueda venir, puede automatizarla con Gulp. La página de complementos Gulp está lleno de paquetes de ideas y encontrará mucho en GitHub. ¡Lo uso para optimizar las imágenes, los mapas de origen, el prefijo, la creación de servidores locales, la actualización automática del navegador y más! ¿Utiliza Gulp u otra herramienta de construcción? ¿Cómo ha cambiado su flujo de trabajo? ¿Cuáles son los mayores beneficios que ve? Háganos saber en los comentarios a continuación. Etiquetas: construir herramientas
sorbo