logo cosasdedevs

Automatizar tareas con gulp.js

Automatizar tareas con gulp.js

My Profile
Ago 20, 2020

¡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.

Como siempre, os recomiendo seguirme en Twitter y nos vemos en el siguiente tutorial 👋.

140 vistas

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si pulsas entendido aceptas su uso. Ver política de cookies.

🐍 Sígueme en Twitter

Si te gusta el contenido que subo y no quieres perderte nada, sígueme en Twitter y te avisaré cada vez que cree contenido nuevo 💪
Luego ¡Te sigo!