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

confiruar Gulp 4 para SASS y Font Awesome 5

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

Imagen por defecto
Appatico
Artículos: 17

4 comentarios

  1. esta es otra forma para sass, javascript y html con browserSync

    import { src, dest, watch, series } from ‘gulp’;
    import babel from ‘gulp-babel’;
    import sass from ‘gulp-sass’;
    import browserSync from ‘browser-sync’;
    import postcss from ‘gulp-postcss’;
    import autoprefixer from ‘autoprefixer’;
    import cssnano from ‘cssnano’;

    let browser = browserSync.create();

    // Rutas de archivos
    const paths = {
    scripts: {
    src: ‘dev/es6/*.js’,
    dest: ‘assets/js/’
    },
    styles: {
    src: ‘dev/sass/style.scss’,
    srcAll: ‘dev/sass/**/*.scss’,
    dest: ‘assets/css/’
    },
    html : {
    src: ‘**/*.html’
    },
    };

    function serverSync() {
    browser.init({
    server: {
    baseDir: «./»
    }
    });

    watchFiles();
    }

    function serverReload(done) {
    browser.reload();
    done();
    }

    function scritps() {
    return src(paths.scripts.src)
    .pipe(babel())
    .pipe(dest(paths.scripts.dest));
    }

    /**
    * browser.stream() -> para injectar los cambios en el navegador después de compilar,
    * debe de ir después de gulp.dest()
    *
    * sass({outputStyle: ‘compressed’})
    *
    * autoprefixer() -> ocupa por defecto la configuracion del archivo .browserlistrc en la raiz del proyecto
    *
    */

    function styles() {
    return src(paths.styles.src)
    .pipe(sass().on(‘errror’, sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(dest(paths.styles.dest))
    .pipe(browser.stream());
    }

    /**
    * series(fun1, fun2,…funN) -> ejecuta una serie de funciones(tareas) de manera secuencial
    * parallel(fun1, fun2,…funN) -> ejecuta una serie de funciones(tareas) simultaneamente
    *
    */

    function watchFiles() {
    watch(paths.scripts.src, series(scritps,serverReload));
    watch(paths.styles.srcAll, styles);
    watch(paths.html.src).on(‘change’,browser.reload);
    }

    const build = serverSync;

    export default build;

  2. En el comentario de arriba se debe crear un archivo como gulpfile.babel.js y agregar todo ese código anterior

    Crear el archivo .browserlistrc se crea en la raiz del proyecto y agregar
    Este archivo lo ocupa: babel, autoprefixer, postcss, eslint

    >0.25%
    maintained node versions
    not dead
    not IE 10

    Crear el archivo .babelrc en la raiz del proyecto y agregar

    {
    «presets»: [ «@babel/preset-env» ]
    }

Deja un comentario