En este artículo verá cómo puede usar Gulp para automatizar varias tareas que normalmente realiza a mano o para las que confía en herramientas desarrolladas por otros.

¿Qué es Gulp

Gulp es un sistema de compilación en streaming. Es posible que ya hayas oído hablar y usado gruñido. Pero últimamente gulp es cada vez más popular. Puede hacer cosas increíbles como compilar LESS / Sass, archivos JS, recargar páginas web en vivo y mucho más.

Por qué usar Gulp

Puede ahorrarle mucho tiempo automatizando varias tareas. Y lo mejor es que tiene el poder de decirle qué hacer, a diferencia de confiar en herramientas de terceros para implementar cierta funcionalidad. En resumen, puede crear su propia herramienta de automatización según su conjunto de necesidades.

Prerrequisitos

Para comenzar necesitas tener instalado Node.js (v0.10.30 o superior). Personalmente prefiero usar Node Version Manager (NVM) para poder cambiar entre diferentes versiones de Node.js en mi máquina de desarrollo.

Empecemos

Lo primero que debes hacer es instalar trago. Usa el siguiente comando de la terminal para hacerlo..

npm instalar -g trago

Esto instalará Gulp globalmente en su máquina..

Comencemos a configurar la herramienta de automatización creando un directorio en la carpeta de temas de WordPress o en cualquier ubicación que desee..

En mi caso navegaré a la carpeta de temas ...

cd… / wp-content / themes

... y ejecute el siguiente comando.

mkdir wp-gulp-automation

Ahora navegaré a la carpeta para iniciar un npm proyecto.

cd wp-gulp-automation npm init

Esto le hará varias preguntas como nombre del proyecto, versión, descripción, autor, licencia, etc..

Puedes rellenarlos o seguir pulsando. Entrar hasta que diga sí. Por último escriba sí y golpear Entrar una vez más.

Esto creará un archivo package.json en el directorio. Contiene información sobre su proyecto y sus dependencias..

Si has seguido el proceso correctamente, tu archivo package.json se verá así:

"name": "wp-gulp-automation", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": " test ":" echo \ "Error: no hay prueba especificada \" && exit 1 "," autor ":" "," licencia ":" ISC "

Primer archivo de Gulp

Instala trago localmente en tu proyecto.

npm install gulp --save-dev

Esto creará un nodo_módulos Carpeta y guarda todas tus dependencias de proyectos allí.. --save-dev se utiliza para actualizar dependencias dev en package.json.

Cree gulpfile.js en el directorio del proyecto con el siguiente código.

var gulp = require ('gulp'); gulp.task ('default', function () console.log ('default gulp task ...'));

En el tipo de terminal trago y golpear Entrar. Verás que el texto anterior está registrado en la consola..

Creación de una herramienta de compilación de Sass básico

Hay varios complementos de trago disponibles para la compilación de Sass. He probado y enumerado tres de ellos a continuación.

1. gulp-sass (simple y fácil de usar)
2. gulp-compass (funciona muy bien con proyectos basados ​​en brújula)
3. gulp-ruby-compass (este da más control que los otros dos)

En aras de la simplicidad, en este tutorial usaré el primero, que es gulp-sass.

Ejecuta el siguiente comando en el directorio del proyecto para instalarlo..

npm instalar gulp-sass --save-dev

Permite actualizar el código para compilar archivos Sass en archivos CSS.

Añadir requiere en la parte superior de gulpfile.

var sass = require ('gulp-sass'); gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('predeterminado', ['sass']);

Ahora cuando corro trago sass En la terminal, la tarea Sass se dispara..

Y como lo he agregado a una serie de tareas predeterminadas, cuando ejecuto gulp en el terminal, la tarea predeterminada activa la tarea sass..

Lo que esto hará es compilar todos los archivos en el css / src carpeta del proyecto y guardarlas en el css carpeta. Es posible que desee pasar opciones adicionales a la hablar con descaro a() Funciona dependiendo de tus necesidades..

Así que básicamente corriendo trago y trago sass Hará lo mismo en este momento.

Lint y compilar archivos JS

A continuación, para tener mejor y empaquetado código JavaScript en tus temas, necesitas gulp-jshint y gulp-concat.

npm instala gulp-jshint --save-dev npm instala gulp-concat --save-dev

Ahora agregue require en la parte superior de gulpfile:

var jshint = require ('gulp-jshint'); var concat = require ('gulp-concat');

Agregue la siguiente tarea truculenta al archivo para crear pelusas y combine todos los archivos js.

gulp.task ('js', function () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) .pipe (concat ( 'theme.js')) .pipe (gulp.dest ('js')););

Si quieres organizar un poco más, puedes tener vendedor y tema carpetas dentro js / src. los vendedor carpeta contiene todas las bibliotecas de terceros, como los complementos de jQuery, y la tema carpeta contendrá el código JavaScript de tu propio tema.

Si también quiere minimizarlos, puede incluir el trago uglify enchufar. Y actualicemos nuestra tarea predeterminada a:

gulp.task ('default', ['sass', 'js']);

Optimizar imagenes

El plugin trago más utilizado para esta tarea es gulp-imagemin. Instálalo usando:

npm instala gulp-imagemin --sav-dev

Añadir requiere gulp-imagemin en la cima:

var imagemin = require ('gulp-imagemin');

Y agrega la siguiente tarea al gulpfile.

gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (optimizationLevel: 7, progressive: true)) .pipe (gulp.dest ('img')));

Lo que esto hará es hacer una copia optimizada de todas las imágenes colocadas en el img / src directorio en el img directorio.

Añádelo a la lista de tareas por defecto..

gulp.task ('default', ['sass', 'js', 'img']);

Ver tarea

Lo siguiente es configurar un reloj para automatizar tareas..

gulp.task ('watch', function () gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js', ['js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Al agregarlo a la lista de tareas por defecto nos da:

gulp.task ('default', ['sass', 'js', 'img', 'watch']);

Manejo de errores

¿Qué sucede si se produce un error al ejecutar una de nuestras tareas? Tu gulpfile dejará de correr.

Para manejar eso, usemos un buen plugin trago llamado gulp-plumber. También usaremos Gulp-Notifications para mostrar avisos de vida útil agradables en caso de errores..

Instalar plomero y trago-notificar utilizando:

npm instalar gulp-plumber --save-dev npm instalar gulp-notify --save-dev

De nuevo requiere esto en la parte superior de gulpfile.

var plumber = require ('gulp-plumber'); var notify = require ('gulp-notify');

Aquí hay una práctica configuración de plomería que usaré cuando ocurra un error en cualquiera de las tareas.

var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', mensaje: 'Error: <%= error.message %>');

Ahora nuestra actualizada hablar con descaro a tarea se verá como

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (fontanero (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')));

Observe la plumberErrorHandler adicional. De la misma manera voy a añadir esto a la js y img Tareas.

Live Reload

Una cosa importante que se necesita es la funcionalidad de recarga en vivo.

En primer lugar, instale una extensión / complemento del navegador para recargar en vivo:

• Extensión de cromo
• Complemento de Firefox

Ahora necesitas instalar gulp-livereload usando:

npm install gulp-liveraload --save-dev

Una vez más, agréguelo a la parte superior donde lo necesite en gulpfile.

var livereload = require ('gulp-livereload');

Vamos a actualizar nuestras tareas para incluir recargas en vivo ahora.

los hablar con descaro a La tarea se verá así:

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (fontanero (plumberErrorHandler)) .pipe (sass ()) .pipe (gulp.dest ( './css')) .pipe (livereload ()););

Del mismo modo añadir carga de hígado al js y img Tareas. Una cosa más que debes hacer es agregar livereload.listen (); al comienzo de la tarea de vigilancia.

gulp.task ('watch', function () livereload.listen (); gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Para probar carga de hígado, vamos a crear un archivo index.php con el siguiente código.

      
Hola desde Gulp herramienta de automatización
   

Y un style.css.

/ * Nombre del tema: Tutsplus gulp wp automation URI del tema: http://tutsplus.com Descripción: Automatización del flujo de trabajo de desarrollo de wordpress. Autor: Atinder Singh Autor URI: http://tutsplus.com Versión: 1.4.1 Licencia: GNU General Public License v2 o posterior Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Ahora activa este tema desde el panel de WordPress. Tienes tu entorno básico configurado y listo para rockear. correr trago en la terminal, y ver el tema activado en su navegador. Haga clic en la extensión de recarga en vivo para que el servidor de recarga en vivo se conecte y escuche los cambios.

Cada vez que cambies el contenido de cualquier archivo en css / src o js / src, gulp estará monitoreando y compilando los archivos y recargando su navegador.

Cosas ligeramente avanzadas

Ahora tiene una herramienta que se puede usar para crear múltiples temas, así que movamos los archivos de tema a otra carpeta en la wp-content / themes / wp-gulp-automation / theme-boilerplate directorio.

Copia el index.php y style.css archivos y la css, img y js carpetas para placa de tema.

Este es un tema muy básico. Puedes ampliar esto o usar el que más te guste..

Para esta última tarea necesitará tres módulos Node.js. Instala json-file, node-fs y fs-extra.

npm install json-file --save-dev npm install node-fs --save-dev npm install fs-extra --save-dev

Requerirlos en la parte superior de su gulpfile.

var fs = require ('node-fs'); var fse = require ('fs-extra'); var json = require ('json-file'); var themeName = json.read ('./ package.json'). get ('themeName'); var themeDir = '… /' + themeName;

Agrega esta tarea a tu gulpfile.

gulp.task ('init', function () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););

Lo que puedes hacer ahora es crear un nuevo tema en wp-contenido / temas utilizando el código repetitivo como tal, especificando el nombre del tema atributo en package.json.

Y corriendo:

gulp init

Ahora tienes dos carpetas:

1. wp-gulp-automation (la herramienta para todos tus temas)
2. myNewTheme (tu tema recién creado)

Las posibilidades para esto son infinitas..

Puede usar CoffeeScript en lugar de JavaScript regular y decirle a gulp que también lo busque. Puede agregar más tareas dependiendo de su flujo de trabajo. Algunas ideas nuevas de tareas podrían ser:

• Eliminando archivos .DS_Store, .thumb o cualquier archivo no deseado automáticamente
• empaquetando el tema en una carpeta zip para enviar en Themeforest

¡Gracias por leer! Si tiene algo que agregar o ha creado nuevas tareas que puede compartir con los lectores, de nada..

Recursos

• Sitio web de Gulp
• Página de Gulp GitHub