Bootstrap + Less + Gulp para Drupal 8

root — Mon, 16 Oct 2017 19:19:41 +0000

Bootstrap + Less + Gulp para Drupal 8

Lunes, Octubre 16, 2017 - 21:19

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.

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.

Bootstrap

Bootstrap + Less + Gulp para Drupal 8

Bootstrap + Less + Gulp para Drupal 8

Referencias

Añadir nuevo comentario