Empezando con Gulp.js

Gulp es una herramienta basada en Javascript que le permite automatizar partes de su flujo de trabajo. La automatización puede, literalmente, ahorrarle horas al día. Ya sea que seas un desarrollador o un diseñador que cree wireframes HTML de vez en cuando, te animo a que entiendas.

En este artículo veremos los aspectos básicos del uso de Gulp: desde la instalación hasta la sintaxis básica y un par de ejemplos. Al final del artículo deberías poder Encuentra, instala y usa paquetes que otros han creado para Gulp para compilar SASS, optimizar imágenes, crear sprites, concatenar archivos y más!

Instalación de Gulp

No te preocupes, la instalación es muy fácil. Tendremos que usar el terminal en OSX y Linux, o el símbolo del sistema para Windows. Me referiré a ello como Terminal a partir de ahora..

Ábralo y escriba npm -v y presione enter. Si ve el número de versión que se muestra, ya tiene Node instalado, esto es una dependencia para Gulp.

Si obtienes un “Comando no encontrado” (o un error similar), diríjase a la página de descargas de Node.js y seleccione el paquete apropiado para su sistema. Una vez instalado, el comando npm estará disponible en la terminal..

Instalar Gulp es igual de fácil. Pegue el siguiente comando en el terminal, eso es todo:

npm instalar - trago global

Esto instalará el comando Gulp que estará disponible globalmente en su sistema.

Añadiendo Gulp a un proyecto

Gulp ya está instalado, pero tendremos que agregarlo a cada proyecto para el que lo necesitemos, por separado. Cree una carpeta vacía ahora y navegue hasta ella en su terminal. Mientras esté en la carpeta para el proyecto, use el siguiente comando:

npm instalar --save-dev gulp

Esto debería crear una carpeta node_modules y un archivo npm-debug.log en su carpeta de proyecto. Gulp los utiliza para hacer lo que necesita para su proyecto, no necesita pensar en ellos en esta etapa..

La razón por la que necesitamos agregar Gulp a cada proyecto específico es que Cada proyecto tiene diferentes requisitos.. Uno puede pedir SASS, otro para Menos. Uno puede usar Coffeescript, el otro no, etc..

El gulpfile

El Gulpfile es donde ocurre la magia, es donde se define las automatizaciones que requieres y cuando quieres que pasen. Vamos a crear una tarea predeterminada vacía creando un archivo llamado gulpfile.js y pegando el siguiente código en él.

var gulp = require ('gulp'); gulp.task ('default', function () // Esto no hace nada por ahora, pronto agregaremos funcionalidad);

Una vez que se guarda este archivo, puede volver a su terminal y ejecutar el comando gulp por sí solo. Gulp detecta en qué proyecto se encuentra y ejecuta la tarea predeterminada, la que acabamos de crear. Debería ver algo como esto:

Aquí no ocurre nada realmente, ya que la tarea está vacía, pero funciona bien. Ahora, vamos con algunos ejemplos apropiados!

Copiando un archivo

Esto es aburrido, lo admitiré, pero te ayudará a entender lo que está pasando fácilmente..

En su carpeta de proyecto cree un archivo llamado to_copy.txt , y una carpeta llamada dev. Vayamos a nuestro Gulpfile y creemos una nueva tarea llamada dupdo.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

La primera línea define una tarea que se llama copiar. Dentro de esto, usamos gulp.src para especificar a qué archivos nos dirigimos con esta tarea, en este caso es un solo archivo llamado to_copy.txt.

Luego, canalizamos estos archivos a la función gulp.dest que especifica dónde queremos colocar estos archivos. He utilizado el directorio dev.

Vuelve a tu terminal y escribe. copia trillada para ejecutar esta tarea, debe copiar el archivo especificado en el directorio especificado, algo como esto:

El comando de tubería está en el corazón de Gulp. Es una forma eficiente de mover datos entre comandos. El comando src especifica los archivos que se canalizan al comando dest. En escenarios más complejos, canalizamos nuestros archivos a otros comandos antes de especificar un destino.

También debe tener en cuenta que la fuente se puede proporcionar como un solo archivo o varios archivos. Si tenemos una carpeta llamada producción Y queremos mover todos los archivos de nuestro desarrollo carpeta en ella, podríamos usar el siguiente comando:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

El personaje estrella coincidirá con cualquier cosa dentro del directorio. También puede hacer coincidir todos los archivos dentro de todos los subdirectorios, y hacer todo tipo de otras coincidencias de fantasía. Eche un vistazo a la documentación de node-glob para obtener más información..

Compilación de sass

Compilar una hoja de estilo a partir de archivos SASS es una tarea común para los desarrolladores. Se puede hacer con Gulp con bastante facilidad, aunque tendremos que hacer un poco de preparación. Además de los comandos básicos como src, dest y muchos otros, todas las funciones se agregan mediante complementos de terceros. Así es como hago para usarlos..

yo tecleo SASS Gulp en Google, el primer resultado suele ser el que necesito, debes encontrar la página del paquete SASS. Le muestra cómo instalarlo (npm install gulp-sass). Es probable que necesite usar sudo para instalarlo como administrador, por lo que probablemente será (sudo npm install gulp-sass) .

Una vez hecho esto, puede usar la sintaxis que el paquete dicta para compilar su código. Para hacer esto, cree un archivo llamado styles.scss con el siguiente contenido:

$ primario: # ff9900; cuerpo fondo: $ primario; 

Ahora crea la siguiente tarea Gulp en el Gulpfile.

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

Antes de ejecutar el comando, no olvide 'requerir' el paquete en la parte superior del archivo Gulp de esta manera:

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

Cuando corres trago sass, todos los archivos con la extensión scss se canalizarán a la función sass, que los convertirá a css. Estos se canalizan a la función de destino que los coloca en la carpeta css.

Viendo archivos y carpetas

Hasta ahora todo esto es útil, pero todavía tenemos que escribir un comando cada vez queremos ejecutar una tarea, que no es muy eficiente, especialmente cuando se trata de cambios de hojas de estilo. Gulp le permite ver los archivos en busca de cambios y ejecutar comandos automáticamente.

En el Gulpfile, crea un comando llamado automatizar que utilizará el comando watch para ver un conjunto de archivos en busca de cambios, y ejecuta un comando específico cuando cambia un archivo.

gulp.task ('automatizar', función () gulp.watch ('*. scss', ['sass']););

Si escribes gulp automatizar en el terminal, comenzará y finalizará la tarea, pero no volverá a la solicitud porque está monitoreando los cambios. Hemos especificado que queremos ver todos los archivos scss en el directorio raíz y, si cambian, queremos ejecutar el comando sass que hemos configurado previamente.

Si ahora cambia su archivo style.scss, debe compilarse en el archivo css dentro del directorio css automáticamente.

Ejecutando múltiples tareas

Hay muchas situaciones en las que es posible que desee ejecutar varias tareas. Cuando esté viendo su carpeta javascript, es posible que desee compilar dos archivos concatenados y luego proceder a minimizarlos. Hay dos maneras en que puedes hacer esto.

Si las tareas están relacionadas, me gusta encadenarlos. Un buen ejemplo sería la concatenación y la minificación de archivos javascript. Primero canalizamos nuestros archivos a la acción concat, luego los canalizamos para engullirlos, luego usamos la función de destino para generarlos..

Si las tareas no están relacionadas, podría llamar a múltiples tareas. Un ejemplo sería una tarea en la que queremos concatenar y minimizar nuestros scripts y también compilar nuestro SASS. Aquí está Gulpfile lleno de cómo se vería.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automatizar', función () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Si escribes guiones engañosos en el terminal, todos los archivos javascript del directorio js se concatenarán, se enviarán al directorio principal, luego se verificarán y se guardarán en el directorio principal..

Si escribes trago sass, todos sus archivos scss serán compilados y guardados en el directorio css.

Si escribes trago (la tarea por defecto), su guiones La tarea se ejecutará, seguida de su estilos tarea.

los gulp automatizar task observa varias carpetas en busca de cambios en nuestros archivos scss y js y realizará ambas tareas que hemos definido, si se detecta un cambio.

Visión general

Usar Gulp no es difícil, de hecho, muchas personas lo prefieren a Grunt debido a su sintaxis más simple. Recuerde los pasos a seguir al crear una nueva automatización:

• Buscar plugin
• Instalar complemento
• Requerir plugin en tu Gulpfile
• Usa la sintaxis en la documentación.

Los cinco comandos disponibles en Gulp (task, run, watch, src, dest) son los únicos que necesita saber, todos los complementos de terceros tienen una gran documentación. Aquí hay una lista de algunas cosas que utilizo con las que puedes comenzar ahora mismo:

• Optimización de imágenes con optimización de imagen trilla.
• Creando sprites de imágenes con gulp-sprite.
• Concatenando archivos con gulp-concat
• Reducción de archivos con gulp-uglify
• Eliminando archivos con gulp-del
• Javascript linting con gulp-jslint
• JSON forrado con gulp-jsonlint
• Autoprefix CSS con gulp-autoprefixer
• Buscar y reemplazar usando gulp-frep
• Reducir CSS con gulp-minify-css