Automatizar tareas con gulp.js
¡Hola! Esta semana he empezado un nuevo proyecto y una de las formas que encontré de convertir archivos scss a css fue con GULP.JS. He seguido por esa línea y también me he encontrado con que puede minificar imágenes, css y js. Un chollo vamos; así que me he puesto manos a la obra para crear un tutorial para que vosotros también podáis automatizar estas tareas 💪.
¿Qué es GULP.JS?
Gulp.js es una herramienta para automatizar tareas que nos permite a los desarrolladores automatizar procesos como las que hemos comentado antes generando un nuevo archivo con la tarea asignada (por ejemplo minificar).
¿Cómo instalo GULP.JS?
Para instalar gulp.js, primero necesitaremos tener instalado Node.js en nuestra máquina, para ello solo necesitamos seguir este enlace, descargarlo e instalarlo en nuestro PC.
Una vez instalado, accedemos a nuestro terminal y lanzamos el siguiente comando que instalará gulp.js de forma global en nuestro PC:
sudo npm install gulp -g
En Windows sería exactamente igual pero sin el sudo.
Una vez instalado ya podremos usarlo en nuestro proyecto 🎉.
Ahora que ya lo tenemos instalado, vamos al directorio raíz de nuestro proyecto y lanzamos el siguiente comando:
npm init
Este comando generará un archivo llamado package.json donde se guardará información del proyecto ya sean librerías instaladas, versión del proyecto o el nombre del creador.
Lo que vamos a querer hacer en este proyecto va a ser convertir los archivos SCSS a CSS y poder minificar las imágenes, archivos CSS y los archivos JavaScript. Para ello necesitaremos instalar algunas librerías adicionales a parte de gulp.js. Para instalarlas lanzaremos los siguientes comandos:
npm install --save-dev gulp
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-rename
npm install --save-dev gulp-sass
npm install --save-dev gulp-minify
De esta forma instalaremos estas librerías solo para el directorio donde nos encontramos. Observaréis que ahora existe una carpeta en vuestro proyecto llamada node_modules donde se encuentran todas las librerías instaladas y el archivo package.json se habrá modificado mostrando las nuevas librerías instaladas.
{
"name": "my_proyect",
"version": "1.0.0",
"description": "My proyect",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Alberto Ramírez Caballero",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-cssmin": "^0.2.0",
"gulp-imagemin": "^7.1.0",
"gulp-minify": "^3.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0"
}
}
Ahora que ya tenemos el entorno listo es hora de crear el archivo de configuración para gulp.js. Para ello, en nuestro directorio raíz crearemos un archivo llamado gulpfile.js.
Una vez creado es hora de darle funcionamiento, abrimos el archivo gulpfile.js y añadimos el siguiente código:
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const cssmin = require('gulp-cssmin');
const rename = require('gulp-rename');
const scss = require("gulp-sass");
const minify = require('gulp-minify');
var paths = {
styles_scss: {
src: 'static/src/scss/*.scss',
dest: 'static/src/css'
},
styles_css: {
src: 'static/src/css/*.css',
dest: 'static/dist/css'
},
scripts: {
src: 'static/src/js/*.js',
dest: 'static/dist/js'
},
images: {
src: 'static/src/images/*',
dest: 'static/dist/images'
}
};
Aquí lo que estamos haciendo es inicializar todas las librerías que vamos a utilizar, después creamos un variable donde guardaremos todas las rutas donde tiene que leer los archivos y en donde generará el archivo de destino.
Una vez hecho esto, en este mismo archivo, añadiremos las funciones que se encargarán de realizar las acciones que queramos:
function images() {
return gulp.src(paths.images.src)
.pipe(imagemin())
.pipe(gulp.dest(paths.images.dest))
}
function styles_scss() {
return gulp.src(paths.styles_scss.src).pipe(scss({
"bundleExec": true
})).pipe(gulp.dest(paths.styles_scss.dest));
}
function styles_css() {
return gulp.src(paths.styles_css.src)
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.styles_css.dest));
}
function scripts() {
return gulp.src(paths.scripts.src)
.pipe(minify())
.pipe(gulp.dest(paths.scripts.dest))
}
function watch() {
gulp.watch(paths.images.src, images);
gulp.watch(paths.styles_scss.src, styles_scss);
gulp.watch(paths.styles_css.src, styles_css);
gulp.watch(paths.scripts.src, scripts);
}
exports.watch = watch;
La función images se encargará de comprimir las imágenes que se alojen en la ruta seleccionada y las guardará ya comprimidas en la ruta de destino.
La función styles_scss convertirá todos los archivos SCSS en archivos CSS.
La función styles_css minificará los archivos CSS, esto nos ayudará a que la carga de nuestra página sea más rápida.
La función scripts minificará los archivos JS de la ruta dada.
La función watch se encargará de ejecutar nuestras funciones cada vez que detecte un cambio en las rutas de origen.
Por último hacemos un export de la función watch. Gracias a esto, podremos llamar a esta función desde gulp.js en nuestra terminal de la siguiente forma:
gulp watch
Al ejecutar este comando, gulp.js se quedará en modo escucha y cada vez que detecte un cambio actualizará automáticamente los archivos de destino para tener siempre la última versión mientras estamos realizando cambios.
Conclusiones
Como veis, gulp.js puede darnos muchas facilidades a la hora de trabajar en la parte Frontend de nuestro proyecto. Os recomiendo que investiguéis más acerca de esta librería, ya que tiene más funcionalidades de las vistas en este tutorial.
Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.
Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.
Nos leemos 👋.