Bootstrap + Less + Gulp para Drupal 8
Gulp.js es un gestor de tareas en Javascript que nos va ayudar a automatizar tareas repetitivas en nuestro proyecto Drupal. Una de las que mas vamos a repetir mientras estamos desarrollando es compilar el tema para generar el CSS si estamos utilizando un preprocesador como SASS o Less, con el tema de Bootstrap, por ejemplo, o con nuestro propio tema 'custom'.
Añadir Gulp a nuestro tema para compilar nos proporciona unas cuantas ventajas, entre las que podemos destacar:
- Recompilar el tema automáticamente cada vez que modificamos un archivo less.
- Y recargar automáticamente el navegador cuando cambia el CSS.
- Minificar el CSS para mejorar el rendimiento.
- Ejecutar test y chequear el código al compilar el tema, para controlar errores de sintaxis, estándares, etc.
- Gestionar dependencias y minificar nuestros ficheros Javascript.
- Realizar operaciones con ficheros: copiar, mover, borrar, etc.
Vamos a ver una forma sencilla y rápida que nos dará un buen punto de partida para comenzar a utilizar Gulp para compilar nuestro tema de Drupal 8 basado en Bootstrap. Yo estoy utilizando la versión normal que viene con Less por defecto. Si estáis usando SASS en vez de Less podéis darle un vistazo a este artículo (en inglés).
Si habéis seguido las instrucciones para crear un subtema de Bootstrap, ya tendréis una estructura parecida a esta:
- DRUPAL_ROOT/themes/custom/vuestro_subtema
- less
- style.less <-- Este el archivo principal Less para compilar el tema.
- css
- style.css <-- Archivo CSS resultado de compilar el tema.
- less
En este punto, y si no queremos complicarnos la vida, podremos compilar nuestro tema de forma sencilla con un comando llamando al compilador de Less:
lessc less/style.less > css/style.css
Yo tenía esta línea metida en un script bash sencillo llamado compile.sh, y lo ejecutaba cuando necesitaba compilar, así:
sh ./compile.sh
Pero claro, si estáis leyendo es que os va la marcha, así que vamos a ver cómo montamos Gulp en un periquete. Primero vamos a necesitar crear en la raíz de nuestro tema (subtema si usais Bootstrap), un archivo package.json para controlar las dependencias de Npm. Será muy sencillo:
{
"name": "nombre_del_tema",
"version": "0.0.0",
"description": "Paquete para compilar subtema de Bootstrap con Gulp",
"author": "nombre",
"contributors": [
{
"name": "nombre",
"email": "direccion@email.com"
}
],
"dependencies": {},
"devDependencies": {},
"license": "Private"
}
Obviamente vamos a necesitar tener instalado npm, ya que lo vamos a utilizar para instalar cómodamente todos los paquetes y dependencias que necesitamos.
Primero instalamos Gulp como paquete global para no tener problemas con el ejecutable:
npm install -g gulp
Una vez instalado, desde la raíz de nuestro tema, instalamos las dependencias y le decimos a npm que las añada a nuestro fichero package.json con el parámetro --save-dev:
npm install gulp gulp-less gulp-livereload gulp-sourcemaps gulp-watch --save-dev
Después de ejecutar este comando deberíamos tener un directorio node_modules con los paquetes que acabamos de instalar:
ll node_modules/ total 0 drwxr-xr-x 12 charles staff 408 16 Oct 19:36 gulp drwxr-xr-x 8 charles staff 272 16 Oct 19:36 gulp-less drwxr-xr-x 11 charles staff 374 16 Oct 19:36 gulp-livereload drwxr-xr-x 8 charles staff 272 16 Oct 19:36 gulp-sourcemaps drwxr-xr-x 7 charles staff 238 16 Oct 19:36 gulp-watch
Y en nuestro archivo package.json se habrán incluido las dependencias (los números de versión pueden cambiar):
"devDependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.3.2",
"gulp-livereload": "^3.8.1",
"gulp-sourcemaps": "^2.6.1",
"gulp-watch": "^4.3.11"
},
Ahora necesitamos crear el archivo de control para Gulp, llamado gulpfile.js, también en la raíz de nuestro tema, con lo básico para empezar a funcionar:
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function () {
gulp.src('less/style.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
gulp.task('default', ['watch']);
Con esto deberíamos poder ejecutar dos comandos para compilar:
gulp less
Que simplemente compilará el tema creando los CSS dentro del directorio css, o también:
gulp watch
Que dejará el proceso corriendo, vigilando modificaciones en nuestros archivos less y recompilando el tema si detecta algún cambio. Este comando se ejecutará por defecto si solo hacemos:
gulp
Vamos a ver en detalle que hemos metido en este fichero de control de Gulp:
- Las líneas var van a cargar las dependencias que necesitamos.
- Gulp y gulp-less: Carga la libreria y la extension para less.
- gulp-watch: Carga el módulo para vigilar los archivos del tema.
- gulp-livereload: Carga el módulo livereload para automatizar la recarga del navegador. Para que funcione tenemos que instalar una extensión del navegador. Hay extensiones disponibles para Chrome, Firefox y Safari.
- gulp-sourcemaps: Carga el paquete para generar sourcemaps de nuestros ficheros CSS. Tal como está configurado creará un fichero .map separado en el mismo directorio /css. Estos ficheros sirven para ayudar en la depuración de nuestros estilos.
- Tarea less:
- Compila el CSS, aplica el módulo de livereload y genera los sourcemaps necesarios.
- Tarea watch:
- Activa el livereload y vigila los archivos con extension .less, dentro de la carpeta less por si cambian, lo que recompilará el tema completo.
- Tarea default:
- Se ejecuta cuando corremos gulp sin parámetros, y por defecto lanzará la tarea watch.
Con estos sencillos pasos tendremos configurado Gulp en muy poco tiempo, y a partir de esta configuración inicial podremos ir ampliando e introducir otras mejoras o librerías en nuestro proyecto Drupal.