Configurar Gulp 4 con Sass + Bootstrap +FontAwesone + BrowserSync

Si eres como yo, un simple mortal amante del frontend que se dio cuenta que se necesita automatizar la mayoría de los procesos y agilizar nuestro… habrás escuchado de Gulp.

Pero a todo esto.

¿Que es Gulp?

Gulp es un conjunto de herramientas para automatizar tareas dolorosas o que consumen mucho tiempo en el desarrollo de tu flujo de trabajo, así puedes dejar de jugar y construir algo

gulpjs

En otras palabras: Es un manejador de tareas (Task Manajer) que nos permitirá de forma hacer las tareas mas aburridas que complican nuestro trabajo.

Desde mover archivos, compilar SASS, e incluso sincronizar el navegador para ver los cambios en nuestro proyecto, todo esto de manera automática y con una sola configuracion

¿Porque Gulp 4?

Por nada en especial.

La versión 4 de Gulp vino con una serie de cambios que han hecho que muchos desarrolladores se partan la cabeza porque no encontraban el origen de muchos errores. Esto debido a los cambios que la nueva versión ha tenido.

Instalación rápida de Gulp + Boostrap + SASS + BrowserSync y otros

Para usaré gulp para compilar los archivos SASS y que al guardar los cambios BrowserSync me actualice automaticamente.

1. Iniciar proyecto

Antes que nada, debemos tener instalado NodeJs (obviamente) y en nuestra terminal ubicarnos en la carpeta donde tendremos nuestro proyecto e iniciar npm.

npm init -y 

Con esto createmos un package.json por default con todos sus pasos por default y nos saltemos el resto de pasos que npm init nos regala (total, despues podemos modificar)

2. Instalamos Gulp + BrowserSync y otros

Comienza lo divertido, vamos a comenzar a instalar todas las dependencias que vamos a utilizar para nuestro proyecto. En este caso: Bootstrap 4, FontAwesome5, jQuery y Popperjs (Los dos últimos para bootstrap)

npm install bootstrap jquery popperjs @fortawesome/fontawesome-free

Nota: Posiblemente Font Awesome le de problemas al instalarlo de esa forma. Pueden instalarlo por separado.

Lo siguiente es instalar gulp y su plugin para compilar SASS como dependecias de desorrallador ademas de BrowserSync

npm install -D gulp gulp-cli gulp-sass browser-sync

Nuestro package.json nos deberia quedar mas o menos así

{
   "name": "Mi proyecto",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "test"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.10.2",
     "bootstrap": "^4.3.1",
     "fontawesome": "^5.6.3",
     "jquery": "^3.4.1",
     "popper.js": "^1.15.0"
   },
   "devDependencies": {
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.2.0",
     "gulp-sass": "^4.0.2"
   }
 }

Hasta lo mas fácil, lo complicado por así decirlo es la configuración de Gulp 🙂

3. Configurar Gulp 4

La razón principal por la que ustedes están leyendo este articulo, es porque todo los tutoriales son antiguos y fueron hechos para la versión 3.9.+ y anteriores de Gulpjs. Por lo que configurar Gulp 4 a mi se me complico desde un principio

Lo primero que tenemos que haces es crear el archivo gulpfile.js en la raiz de nuestro proyecto y escribimos lo siguiente:

Comenzamos llamando lo que vamos a necesitar:

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

Lo siguiente es declarar una función para compilar todos los archivos SASS y apuntar la carpeta donde se colocaran todos los CSS. En este caso tambien usare Bootstrap y la hoja de estilos

 style = () =>{
     return gulp.src([
         'node_modules/bootstrap/scss/bootstrap.scss', './src/scss/style.scss'
         ])
     .pipe(sass())     .pipe(gulp.dest('./src/css'))     .pipe(browserSync.stream());
 };

En mi caso la carpeta src será donde colocaré todo.

Continuamos declarando los archivos javascript que tengamos:

 js = () => {
     return gulp.src([
         'node_modules/bootstrap/dist/js/bootstrap.min.js',
         'node_modules/popper.js/dist/popper.min.js',
         'node_modules/jquery/dist/jquery.min.js'
         ])habras
     .pipe(gulp.dest('./src/js'))
     .pipe(browserSync.stream());
 };

Seguimos con Font Awesome 5. Estos archivos lo guardare en una carpeta dentro de src, llamada fonts

fonts = () => {
   return gulp
     .src([
       "./node_modules/@fortawesome/fontawesome-free/*/",
       "!./node_modules/@fortawesome/fontawesome-free/{less,less/}",       "!./node_modules/@fortawesome/fontawesome-free/{scss,scss/}",
       "!./node_modules/@fortawesome/fontawesome-free/.",       "!./node_modules/@fortawesome/fontawesome-free/.{txt,json,md}"
     ])
     .pipe(gulp.dest("./src/fonts/font-awesome"));
 };

Es poquito complicado, pero deberíamos tener todo funcionando correctamente si la llamamos desde nuestro html de la siguiente forma:

<link rel="stylesheet" href="fonts/font-awesome/css/all.min.css">

Ahora tenemos que decirle que «escuche» a todos los archivos. Para que cada vez que los modifiquemos actualice el navegador.

 watch = () =>{
     browserSync.init({
         server: {
             baseDir: './src'
         }
     });
     gulp.watch('./src/scss/style.scss', style);
     gulp.watch('./src/*html').on('change', browserSync.reload);
 };

El utlimo paso, es quizas donde todos hemos tenido problemas. Con parallel y series Gulp 4 nos complico un poquito la vida.

 gulp.task('build', 
     gulp.parallel(style, js, fonts))
 gulp.task('default',
     gulp.series('build', watch))

En parallel le digo a gulp que revise cada una de las funciones que hemos declarado y en series que levante BrowserSync con todo los cambios.

Por ultimo le hacemos un cambio a package.json. borramos la linea test y lo cambiamos por:

start": "gulp"

E inicializamos gulp con npm start

Con eso acabaríamos con la configuracion de Gulp para SASS, Bootstrap, BrowserSync y FontAwesome. Y no nos olvidamos de compilar y actualizar el navegador a cada instante.