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

Eventos para cambios de visibilidad en JQuery

root — Thu, 06 Jul 2017 21:02:37 +0000

Eventos para cambios de visibilidad en JQuery

Jueves, Julio 6, 2017 - 23:02

JQuery

Javascript

Este artículo es básicamente una traducción de este original en inglés:

http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

En un caso bastante particular necesitaba detectar si cambiaba la visibilidad de un elemento del DOM que venia de una librería externa de JS. Después de dar algunas vueltas encontré una solución bastante elegante, publicada hace bastante tiempo. No he visto nada parecido en castellano, y hay algunos hilos en Stackoverflow, pero con soluciones bastante extrañas, así que lo publicaré aquí.

Con este bloque de código Javascript podemos registrar los eventos 'hide' y 'show' con la función .on() de JQuery como hacemos con cualquiera de los eventos estándar, de forma que podemos ejecutar nuestro código cuando se produzcan.

(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);

Una vez incluyamos este código, podemos registar los eventos usando un selector, de la manera tradicional:

$('#foo').on('show', function() {
      console.log('#foo es visible');
});

$('#foo').on('hide', function() {
      console.log('#foo esta oculto');
});

El código del ejemplo completo sería algo así.

Código HTML

<button id="btnMostrar">Mostrar</button>
<button id="btnOcultar">Ocultar</button>
<div class="contenedor">
<div id="foo">
    Elemento #foo
</div>
</div>
<div id="console">
</div>

Código CSS

.contenedor {
    height:60px;
    margin:10px;
}
#foo {
    background-color:#eeeeee;
    width:150px;
    height:50px;
    text-align:center;
    font-size:20px;
}

Código Javascript

// Codigo para registrar eventos hide y show
(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);



// Mostrar elemento #foo al hacer click en el boton mostrar
$('#btnMostrar').click(function(){
   $('#foo').show();
});

// Ocultar elemento #foo al hacer click el boton ocular
$('#btnOcultar').click(function(){
   $('#foo').hide();
});

// Añadimos evento para imprimir un mensaje al mostrar #foo
$('#foo').on('show', function(){
    $('#console').html( $('#console').html() + '#foo es visible'+ '<br>'  )
});

// Añadimos evento para imprimir un mensaje al ocultar #foo
$('#foo').on('hide', function(){  
  $('#console').html( $('#console').html() + '#foo esta oculto'+ '<br>'  )
});

Ejemplo

Yo soy #foo

Javascript

Bootstrap + Less + Gulp para Drupal 8

Bootstrap + Less + Gulp para Drupal 8

Referencias

Añadir nuevo comentario

Eventos para cambios de visibilidad en JQuery

Eventos para cambios de visibilidad en JQuery

Código HTML

Código CSS

Código Javascript

Ejemplo​

Añadir nuevo comentario

Ejemplo