Saltar al contenido principal

José Manuel Lucas

UI & Frontend

Integrando Jekyll con Gulp y PostCSS (parte 1)

En estos últimos meses he leído bastantes artículos hablando sobre las bondades de los generadores estáticos, siendo el más conocido de ellos Jekyll.

Para construir mi nuevo sitio web personal decidí probarlo.

Una de las características que incorpora Jekyll es el preprocesamiento de las hojas de estilos escritas en Sass. Sin embargo, hace un tiempo que he pasado a usar PostCSS, ya que encuentro la forma de trabajar de este más adecuada a mis necesidades y además hace una mejor adopción de futuros estándares.

En esta serie de artículos detallaré como he integrado mi actual sistema de construcción de estáticos (con Gulp, Bower, PostCSS y demás) con el sistema de construcción de estáticos de Jekyll.

Como requisito, deberemos tener instalado Node.js y Ruby.

Puedes encontrar el código del proyecto en: https://github.com/jmlweb/jmlweb

1) Preparando el proyecto

Lo primero que debemos hacer es crear un directorio raíz, donde residirá el proyecto. En mi caso lo he llamado jmlweb.

Dentro de este directorio crearemos a su vez otros dos directorios, uno llamado src, donde estarán todos los ficheros fuente y otro llamado dist, donde se generarán los estáticos (este último se generará automáticamente, por lo que no es obligatorio crearlo).

2) Instalando dependencias

Vamos a crear nuestro fichero package.json con los datos de nuestro proyecto. Para ello ejecutamos el siguiente comando, dentro del directorio raíz:

npm init

Introducimos el nombre del proyecto, descripción y demás (ninguna de estas opciones es obligatorias, podemos pasarlas sin ningún problema).

A continuación instalamos Gulp y Bower de forma global:

npm i -g gulp && npm i -g bower

Procedemos ahora a instalar el resto de dependencias. Para evitar tener que instalarlas una a una, lo ideal es copiar el apartado “devDependencies” de mi fichero package.json: https://raw.githubusercontent.com/jmlweb/jmlweb/master/package.json.

Las dependencias node.js que vamos a usar dentro de gulp son las siguientes:

  • browser-sync: Inicializa un server de pruebas, abre una nueva ventana de nuestro navegador por defecto y propaga los cambios que realizamos en tiempo real. Además, vincula nuestros navegadores, de tal forma que al cambiar de página o cumplimentar un formulario en uno de ellos, sincroniza los cambios con los demás.
  • css-mqpacker: Agrupa las reglas css pertenecientes a una misma media query que hemos ido “esparciendo” a lo largo de nuestras hojas de estilo.
  • del: Para borrar ficheros o directorios.
  • gulp-changed: Permite ejecutar una acción sólo en el caso de que los ficheros fuentes se hayan modificado.
  • gulp-concat: Como su propio nombre indica, concatena en un sólo fichero varios ficheros fuente.
  • gulp-cssnano: Optimización y minificación de código CSS.
  • gulp-help: Permite añadir mensajes de información sobre las tareas.
  • gulp-htmlhint: Para validar nuestro código HTML.
  • gulp-htmlmin: Para minificar nuestro código HTML.
  • gulp-imagemin: Optimización de imágenes.
  • gulp-jshint: Validación de nuestro código JS.
  • gulp-plumber: Permite seguir ejecutando Gulp aún cuando una tarea provoque un fallo.
  • gulp-postcss: Herramienta para transformar estilos CSS con plugins creados en javascript. Para más información: http://webdesign.tutsplus.com/es/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535
  • gulp-svg-sprite: Generación automática de sprites SVG. Multitud de opciones y configuraciones de exportación.
  • gulp-uglify: Ofuscación/minificación de código JS.
  • load-plugins: Permite cargar automáticamente los plugins cuyo nombre lleve un prefijo (por defecto gulp-. To también los uso para cargar los que empiecen por postcss-). De esta forma nos ahorramos tener que estar escribiendo multitud de “requires” en nuestro gulpfile.
  • postcss-clearfix: Escribiendo clear: fix, limpiamos los float de los elementos hijos.
  • postcss-cssnext: Nos permite escribir sintaxis que todavía está en fase borrador o de estudio por parte del W3C (variables, transformaciones de color y más).
  • postcss-easings: Convierte funciones de animación (se pueden consultar en http://easings.net a su equivalente cubic-bezier().
  • postcss-extend: Permite extender estilos a partir de un único estilo padre, evitando tener que duplicar reglas CSS.
  • postcss-focus: Todos los estilos definidos para los estados :hover se aplican también al estado focus para mejorar la accesibilidad en dispositivos táctiles.
  • postcss-import: Nos permite generar un fichero CSS único a partir de la importación de múltiples ficheros CSS externos.
  • postcss-nested: Con este plugin podremos escribir estilos en cascada, de forma similar a como lo haríamos en SASS.

Una vez hemos creado nuestro fichero package.json con las dependencias necesarias las instalamos con el siguiente comando:

npm i

2) Instalando y preparando Jekyll

El siguiente paso que vamos a realizar es instalar Jekyll. Para ello, ejecutamos este comando:

gem install jekyll

Ya tenemos instalado Jekyll, ahora sólo tenemos que inicializar un nuevo proyecto dentro de nuestro directorio src.

cd src
jekyll new .

Ahora es el momento de configurarlo. Como la validación, compilación y minificación de assets la vamos a hacer desde Gulp, eliminamos el directorio _sass y vaciamos el directorio css.


Y hasta aquí la primera parte del artículo. En la segunda veremos cómo crear nuestro gulpfile.js para compilar jekyll.