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.
[…] otro post ya habia explicado mas o menos como integrar Boostrap al Gulp 4 los pasas son los mismos. Desde crear el archivo package.json hasta instalar Gulp y […]
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;
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» ]
}
Muchas gracias.
Lo voy a probar y seguir aprendiendo