Introducción a Gulp.js, SCSS y BrowserSync

¿Qué es Gulp.js?

Gulp.js es una herramienta para automatizar procesos, es muy útil para tareas repetitivas que nos hacen perder tiempo

¿Qué es SCSS?

SCSS es una sintaxis dentro de SASS (Syntactically Awesome Style Sheets). SASS es un lenguaje «extendido» de CSS, para que nos hagamos a la idea es un CSS vitaminado.

La principal diferencia es que SASS tiene una sintaxis totalmente distinta a CSS, mientras que SCSS tiene todas la ventajas de SASS pero con la sintaxis de CSS. Si nunca has trabajado con SASS empezar con SCSS es una buena idea.

Para convertir nuestro código SCSS en CSS plano utilizaremos Gulp

¿Qué es BrowserSync?

BrowserSync es un paquete de Node ideal para desarrollar web, permite ver los cambios que realicemos en tiempo real (tanto a nivel de contenido como de estilos) y testear nuestro proyecto local en otros dispositivos que se encuentren en nuestra misma red, ideal para ver nuestro proyecto en Smartphones, por ejemplo

Conceptos básicos de SCSS

Un resumen rápido de los puntos fuertes de SASS/SCSS sobre CSS

Variables

En SCSS podemos definir variables para utilizarlas posteriormente ¿Cuantas veces has tenido que buscar/reemplazar tu código css por un valor y reemplazarlo por otro?

Con SCSS puedes hacer:

$body-background: #fefefe;

$body-color: #444;

body {

[ws]background-color: $body-background;

[ws]color: $body-color;

}

Anidamiento o nesting

Para mantener el código limpio y legible podemos anidar selectores de elementos que van dentro de otros, de esta forma nuestro código queda mucho más reducido y entendible

.header {

[ws]background-color: #fff;

[ws].brand {

[ws][ws]height: 50px;

[ws][ws]a {

[ws][ws][ws]display: block;

[ws][ws]}

[ws]}

}

Imports y partials

Con el objetivo de estructurar bien nuestro código podemos separar los distintos elementos en archivos diferentes y importarlos en otros, esto también nos es muy útil a la hora de poderlo reutilizar. Un archivo partial tiene la misma extensión .scss pero debe empezar con _ para que los procesadores sepan que es un partial

@import layout/header

@import layout/footer

En el momento de importar un archivo en otro la ruta debe ser relativa, podemos obviar la extensión y el _

«Extensión» de classes

Otra funcionalidad muy potente de SCSS es el extend, para ahorrarnos reescribir todo el rato el mismo código, podemos hacer referencia a una clase definida anteriormente para aplicar los mismos estilos

.button {

[ws]background-color: $primary-color;

[ws]color: #fff;

[ws]border-radius: 3px;

[ws]padding: 10px 20px;

}

[ws]

#comment-form input[type=»submit»] {

[ws]@extend .button;

}

Mixins

Un mixin es parecido a un extend, pero en este caso podemos pasarle parámetros, se ve más claro en el ejemplo:

@mixin button($bg, $color, $radius) {

[ws]background-color: $bg;

[ws]color: $color;

[ws]border-radius: $radius;

[ws]padding: 10px 20px;

}

[ws]

#comment-form input[type=»submit»] {

[ws]@include button($primary-color, #fff, 3px);

}

Funciones

SCSS incluye funciones muy útiles para realizar operaciones, por ejemplo:

.button {

[ws]background-color: $primary-color;

[ws]color: lighten($primary-color, 15%);

[ws]border: 1px solid darken($primary-color, 10%);

}

Puedes ver un listado completo de las funciones en este enlace

Operaciones

Podemos realizar operaciones matemáticas directamente dentro de SCSS

$button-padding: 10px;

.button {

[ws]background-color: $primary-color;

[ws]padding: $button-padding;

[ws]&.large {

[ws][ws]padding: $button-padding*2;

[ws]}

}

El & que precede a la clase .large hace referencia a su antecesor, es decir en este caso estamos definiendo las reglas para un elemento que tenga tanto la clase button como la clase large

Instalación de Gulp.js

Gulp funciona sobre Node.js, si no lo tienes instalado en tu ordenador puedes bajar Node.js de su página web

Vamos a instalar el comando de gulp, abrimos el terminal y escribimos

npm install –global gulp-cli

Navegamos a la raíz de nuestro proyecto (Este paso varía según el Sistema Operativo y donde este el proyecto) en mi caso:

cd Sites/gulptest

Ahora instalamos Gulp como dependencia de nuestro proyecto

npm install –save-dev gulp

Como en nuestro caso queremos Gulp para procesar SCSS, instalamos también la extensión de SASS

npm install –save-dev gulp-sass

Estructura de nuestro proyecto

Crearemos dos carpetas en nuestro proyecto, en la carpeta assets pondremos todo nuestro código SCSS, la carpeta static la dejamos vacía ya que el CSS lo generaremos automáticamente

root

├── assets

| ├── scss

| └── app.scss

├── static

| ├── css

├── index.html

Creando el archivo gulpfile.js

En la raíz del proyecto creamos un archivo gulpfile.js, toda la configuración la añadiremos aquí dentro

Gulp funciona con un sistema de tareas, vamos a crear una tarea llamadastyles que procese nuestro SCSS:

var gulp = require(‘gulp’);

var sass = require(‘gulp-sass’);

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass())

[ws][ws].pipe(gulp.dest(«./static/css»));

});

¿Fácil no? La tarea dice: Coge cualquier archivo.scss dentro de /assets/scss, procesarlo como.css y guardalo en/static/css

Para probarlo escribimos en la terminal

gulp styles

Esto genera el archivoapp.css dentro de/static/css

Automatizando las tareas en Gulp

Ahora que tenemos la tarea creada, vamos a añadir otra, que esté «mirando» los archivos.scss y cuando detecte un cambio en ellos ejecute la tareastyles, vamos a crear la tareaserve

gulp.task(‘serve’, function() {

[ws]gulp.watch(‘./assets/scss/**/*.scss’, [‘styles’]);

});

¡Listo! Ahora escribimos en la terminal:

gulp serve

Mientras el proceso esté activo cada vez que editemos el archivo.scss Gulp lo procesara y creará el archivo.css correspondiente, si queremos finalizar el proceso pulsamos Cmd + C en Mac o Ctrl + C en Windows

Creando el index.html

Ahora que ya generamos un archivo .css vamos a poner una estructura básica en nuestro index.html que lo cargue

<!DOCTYPE html>

<html lang=»es»>

<head>

[ws]<meta charset=»UTF-8″>

[ws]<title>SCSS & Gulp</title>

[ws]<link rel=»stylesheet» href=»/static/css/app.css»>

</head>

<body>

[ws]<h1>Probando Gulp con SCSS!</h1>

</body>

</html>

Complicándolo un poco

Vamos a instalar unos cuantos paquetes adicionales para darle más funcionalidades a nuestra tareastyles:

npm install –save-dev gulp-autoprefixer gulp-clean-css gulp-rename

Que queremos hacer con los esto:

Autoprefixer: Hacer que nuestro css venga prefijado (donde haga falta) para maximizar la compatibilidad con los navegadores
Clean CSS: Comprimir CSS
Rename: Cambiar el nombre de los archivos .css

Primero declaramos los nuevos paquetes en la parte superior del archivo Gulp:

var autoprefixer = require(‘gulp-autoprefixer’);

var rename = require(«gulp-rename»);

var cleanCSS = require(‘gulp-clean-css’);

Y editamos nuestra tarea styles de la siguiente forma:

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass())

[ws][ws].pipe(autoprefixer({

[ws][ws][ws]browsers: [‘last 2 versions’],

[ws][ws][ws]cascade: false

[ws][ws]}))

[ws][ws].pipe(cleanCSS())

[ws][ws].pipe(rename({

[ws][ws][ws]suffix: «.min»,

[ws][ws]}))

[ws][ws].pipe(gulp.dest(«./static/css»));

});

Volvemos a ejecutar la tarea para ver los cambios:

gulp serve

Ahora nuestro CSS está prefijado y comprimido

Recordad de cambiar el nombre del archivo css en el index.html ya que ahora es app.min.css

Último paso: Añadiendo BrowserSync

Primero descargamos BrowserSync:

npm install –save-dev browser-sync

Inicializamos BrowserSync:

var browserSync = require(‘browser-sync’).create();

Seguidamente vamos a modificar nuestra tarea serve, queremos que cada vez que modifiquemos nuestro archivo.html el navegador refresque automáticamente

gulp.task(‘serve’, function() {

[ws]browserSync.init();

[ws]gulp.watch(«./assets/scss/**/*.scss», [‘styles’]);

[ws]gulp.watch(«./**/*.html»).on(‘change’, browserSync.reload);

});

También queremos refrescar el navegador cuando se ejecuta la tareastyles, para hacerlo añadimos una linea extra al final:

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass())

[ws][ws].pipe(autoprefixer({

[ws][ws]browsers: [‘last 2 versions’],

[ws][ws]cascade: false

[ws]}))

[ws].pipe(cleanCSS())

[ws].pipe(rename({

[ws][ws]suffix: «.min»,

[ws]}))

[ws].pipe(gulp.dest(«./static/css»))

[ws].pipe(browserSync.stream());

});

¡Listo! Ahora al ejecutar:

gulp serve

Se nos abre una ventana con la ruta http://localhost:3000, podemos hacer la prueba que al editar elscss o elhtml los cambios se reflejan

También podemos acceder a nuestro proyecto desde otro dispositivo (conectado a la misma red) poniendo la url local de nuestro ordenador con el puerto de BrowserSync, en mi caso http://172.26.0.50:3000

Conclusión

Este artículo es solo una pequeña introducción a lo que se puede hacer con scss o gulp, más adelante me gustaría profundizar más en otros ámbitos como crear tareas para scripts, incluir un Framework de CSS como Bootstrap o Foundation en nuestro Gulp o una pequeña introducción a BEM y SCSS