Una forma de trabajar SASS con Gulp • JnjSite.com

Este es un pequeño codekata o howto para configurar un proyecto SASS con Gulp. Un proyecto en el que tengamos unos fuentes hechos con SASS, de forma que, continuamente se reprocesen con cada cambio detectado, generando las hojas de estilo finales en CSS normal.

Un poco de teoría sobre Gulp

¿Qué es Gulp? Gulp es una herramienta JavaScript para automatizar tareas de trabajo, principalmente usada para el desarrollo web. Con este conjunto de herramientas, junto con sus plugins, nos harán el día a día más fácil, trabajaremos mejor, con mejores resultados, más eficientemente, etc..

Al grano, lo primero que necesitaremos será tener instalado Nodejs, para instalarlo si no lo tienes, te invito a ver un post anterior sobre cómo instalar Nodejs.

Lo siguiente para este post, será que tenemos que instalar los paquetes de Gulp y sus plugins necesarios. Para esto podemos ir a línea de comandos y ejecutar lo siguiente:

npm init
npm install --save gulp gulp-sass gulp-clean-css gulp-sourcemaps

Un poco de teoría sobre SASS

Vayamos al grano también, lo que hay que saber de SASS es que nos permite preprocesar muchos ficheros de estilo con una sintaxis nueva para mejorar nuestro trabajo. Estos ficheros SASS, como he dicho antes arriba en el post, te permiten hacer funciones, importar unos en otros, etc..

Es decir, tendremos unos ficheros en SASS con la extensión .scss, que tienen una sintaxis especial. Estos ficheros SASS nos permiten hacer cosas como usar variables, hacer una especie de funciones que se llaman @mixins, incluso combinar ficheros de estilos, dividiendo todas las hojas de estilo por secciones, etcétera..

Luego, generaremos uno o varios ficheros finales en CSS normal, según cada proyecto y según cómo queramos.

Empezando a procesar SASS con Gulp

Así que, empezando a procesar SASS con Gulp, con un fichero nombrado gulpfile.js en el directorio principal podría ser:

'use strict'

const gulp = require("gulp")
const sass = require("gulp-sass")

function css() {
    return gulp.src('./scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
}

exports.css = css

Este fichero se puede llamar desde línea de comandos para que procese los fichero SASS que hay en ./scss/main.scss y ponga el resultado en ./css/main.css haciendo esto:

gulp css

Monitorizando cambios para reprocesar el SASS

Lo siguiente que podemos querer, es que se reprocese contínuamente para no tener que ir a línea de comandos y lanzarlo. Podemos crear entonces este comando que correrá continuamente en un terminal:

gulp watch

Para que esto funcione, tendremos entonces que crear la función watch que monitorize cambios en el fichero ./scss/main.scss así:

'use strict'

const gulp = require("gulp")
const sass = require("gulp-sass")
const { parallel } = require('gulp')

function css() {
    return gulp.src('./scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
}

function watchCss(){
    gulp.watch('./scss/*', parallel('css'))
}

exports.css = css
exports.watch = watchCss

Mira que simplemente hay que añadir la función watchCss y exportarla para el comando watch. El monitoreo lo hace sobre cualquier fichero que haya en el directorio ./scss/* con lo que si tenemos varios ficheros SASS los vigilará.

Unos ficheros SASS para probar

Un fichero ./scss/main.scss podría ser:

@import "vars";

body {
    background-color: $def-background-color;
    color: $def-foreground-color;
}

button {
    background-color: $def-background-color;
    color: $def-foreground-color;
    border-radius: $def-border-radius;
}

@mixin setBackgroundForeground () {
    background-color: $def-background-color;
    color: $def-foreground-color;
}

h1,
h2 {
    @include setBackgroundForeground ();
}

input {
    @include setBackgroundForeground;
}

Y un fichero para las variables importadas ./scss/_vars.scss podría ser:

$def-background-color: #888;
$def-foreground-color: #111;
$def-border-radius: 3px;

Hasta aquí ya podemos lanzar el comando ‘gulp watch’ y nos ponemos a trabajar continuamente. Viendo los resultados. En línea de comandos veremos continuamente algo como lo siguiente:

Minimizando ficheros

Lo siguiente que podemos querer además de procesar los ficheros SASS, es minimizar los ficheros. Esto lo podemos conseguir usando el plugin de Gulp llamado Gulp-clean-css. Esto se podría conseguir haciendo esto en el gulpfile.js:

'use strict'

const gulp = require("gulp")
const sass = require("gulp-sass")
const cleanCss = require("gulp-clean-css")
const { parallel } = require('gulp')

function css() {
    return gulp.src('./scss/main.scss')
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest('./css'))
}

function watchCss(){
    gulp.watch('./scss/*', parallel('css'))
}

exports.css = css
exports.watch = watchCss

Al principio del post, habíamos instalado en el proyecto, con NPM, el paquete de gulp-clean-css. Ahora en el fichero de Gulp simplemente hemos añadido el require y lo usamos en la función css(). Veremos que el fichero final ./css/main.css ahora está procesado con SASS, y además, también está minificado.

Mapeando los ficheros SASS para trabajar mejor en el navegador

Lo último para este post que veo interesante, es el poder hacer debug en el navegador lo mejor posible. Si hemos minificado el fichero, o hemos combinado varios ficheros SASS en uno sólo, lo complicado es que al ver los resultados en el navegador necesitaremos probablemente ir al grano de dónde está cada cosa. Esto lo podemos conseguir mapeando el fichero final ./css/main.css y así veremos al inspeccionar en el navegador algo como lo siguiente:

Para ver bien los resultados vamos a editar el fichero ./scss/main.scss cambiando esto del principio:

@import "vars";
@import "test";
..

Ahora creamos el fichero ./scss/_test.scss que por ejemplo podría ser así:

p {
    color: green;
}

Ya sólo queda generar el mapeo con Gulp haciendo lo siguiente. Ya el fichero resultado quedaría así:

'use strict'

const gulp = require("gulp")
const sass = require("gulp-sass")
const cleanCss = require("gulp-clean-css")
const sourcemaps = require('gulp-sourcemaps')
const { parallel } = require('gulp')

function css() {
    return gulp.src('./scss/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./css'))
}

function watchCss(){
    gulp.watch('./scss/*', parallel('css'))
}

exports.css = css
exports.watch = watchCss

Sólo se ha añadido el require y el uso de sourcemaps en dos sitios. Ahora podemos hacer ‘gulp watch’ y trabajar continuamente los SASS.

Terminando, referencias

Para terminar sólo me queda remitirte a las páginas oficiales de las documentaciones o proyectos, para que sigas avanzando:

Otro día más, ¡un saludo!