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.

Referencias

Añadir nuevo comentario

Instalar compilador de less en Debian

root — Fri, 02 Oct 2015 23:24:29 +0000

Instalar compilador de less en Debian

Sábado, Octubre 3, 2015 - 01:24

Linux

Debian

less

Primero vamos a probar la versión rápida y sencilla, que es con el paquete de Debian, que instalamos como root:

# apt-get install node-less

Esto nos instalará el paquete principal de node.js y el compilador de less. Ahora ya podemos probar el compilador, con salida por stdout:

$ lessc styles.less

O con salida a un fichero

$ lessc styles.less > styles.css

Al ser un paquete de Debian, es posible que esta versión no este muy actualizada. En mi caso en el momento de instalarlo la versión que ha traido es esta (en Debian Sid):

$ lessc --version
lessc 1.6.3 (LESS Compiler) [JavaScript]

Si queremos tirar de una versión mas actualizada, es mejor instalarlo de otra manera, que es con el gestor de paquetes de node.js: npm. Para ello, lo instalamos tirando del paquete de Debian:

# apt-get install npm

Y después instalamos less usando npm, con la opción -g para que lo instale global todo el sistema (hacer esto como root):

# npm install -g less

Y comprobamos la versión, mucho mas nueva:

lessc --version
lessc 2.5.3 (Less Compiler) [JavaScript]

En mi caso, al instalar con npm, se hace un lío con el ejecutable de node.js, que en unos sitios es node y en otros nodejs, y al ejecutar da errores como este:

lessc
/usr/bin/env: node: No existe el fichero o el directorio

Esto tiene fácil solución, creando un enlace dinámico para que lo encuentre (también hay que hacer esto como root):

# ln -s /usr/bin/nodejs /usr/bin/node

Eso es todo. Supongo que la mayoría funcionara también en Ubuntu, pero eso ya os lo dejo a vosotros...