Como configurar Bulma CSS a Gulp 4

Estuve viendo algunas alternativas para dejar de usar Bootstrap 4. Ya me había decidido usar Tailwind, un nuevo Framework que se ha puesto de moda en el ultimo tiempo. Pero al no poder integrarlo con Gulp y al mismo tiempo integrarlo a WordPress. Me vi en la obligación de usar Bulma CSS el mejor Framework del mundo.

Que es Bulma CSS?

Bulma es un framework CSS sencillo, moderno y elegante que muchos desarrolladores estan prefiriendo por encima del popular Bootstrap. Personalmente, pienso que Bulma tiene un mejor diseño por defecto.

Desarrollado por Jeremy Thomas este framework basado en flexbox con una gama amplia de caracteristicas integradas, significa un tiempo de respuesta mucho mas rápido con menos código. Lo que permite tambien un rapido aprendizaje en su uso, ideal para aquellas personas que recien estan empezando.

3 razones del porque tienes que usar Bulma CSS?

Estas son algunas de las otras ventajas que creo que podrían hacer de Bulma CSS tu nuevo framework favorito.

Facil de aprender

Bulma esta diseñado para simplificar el proceso de codificación. Y lo hace mucho mas facil el hecho de tener plantillas ya diseñadas para el apresurar el aprendizaje, ademas de tutoriales interactivos

Es modular

Bulma no es un framework de todo o nada; simplemente es modular. Lo que significa que puedes usar las piezas de codigo que desees y dejar el resto.

Es decir que si quieres solo los botones o las grillas. Simplemente tiene que importar los archivos .sass que corresponden y no se necesita más.

Solo es CSS

Bulma solo es un framework exclusivo de CSS. Solo obtenemos un archivo (bulma.css). Si quieres aprovechar la modularidad, solo tiene que descargar los archivos individuales .sass.

Esto significa que no hay JavaScript en Bulma. Algo que no me gusta de Bootstrap por ejemplo es que te obliga a usar tres librerías de JavaScript para que funcione correctamente. Bulma solo se preocupa de la maquetacion y no así de la lógica

Configurar Bulma CSS a Gulp 4

En 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 Gulp-sass.

Primero debemos instalar Bulma

npm install bulma

Configuramos Gulpfile.js

//obviamente importamos los archivos de gulp y gulp sass
const gulp = require('gulp');
const sass = require('gulp-sass');

//BrowserSync para escuchar los cambios y se recargue cuando hay uno
const browserSync = require('browser-sync').create();

bulma= () =>{

    return gulp.src('./node_modules/bulma/bulma.sass')

    .pipe(sass())
     // donde guardamos el proyecto.
    .pipe(gulp.dest('./css'))
    .pipe(browserSync.stream());
};

Hacemos que se ejecute

gulp.task('build', 
     gulp.parallel(style))

gulp.task('default',
     gulp.series('build', watch))

No es complicado usarlo, asi como tampoco es complicado configurar bulma CSS a gulp. Seguiré intentando configurar tailwind css a gulp en un futuro, a ver como me va