school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Configura tus herramientas de compilación

Crea tu sitio para varios dispositivos desde cero. Obtén información sobre cómo acelerar el desarrollo y crear un sitio de carga rápida con un conjunto de herramientas de proceso de compilación. Cada sitio debe tener una versión de desarrollo y una versión de producción.

La versión de desarrollo contiene todos los archivos HTML, CSS, JS y de imagen que componen tu sitio en un formato limpio sobre los que te gusta trabajar.

Una versión de producción tomará estos archivos, los reducirá, concatenará o fusionará y luego los optimizará como imágenes.

Los programadores web deben pensar en un millón de cosas a la vez, y la etapa de compilación es una de las más importantes y complicadas para comenzar. Debes descubrir todas las tareas que necesitas automatizar, por ejemplo: Compresión de imágenes, reducción de CSS, concatenación de JavaScript, pruebas adaptables, prueba de unidades, etc.

Sigue esta guía para obtener información sobre la mejor manera de estructurar tu flujo de trabajo de manera que los sitios que crees ya sigan las mejores práctica desde el minuto en que comienzas.

TL;DR

  • Tus herramientas de proceso de compilación deben optimizar el rendimiento, y reducir y concatenar automáticamente JavaScript, CSS, HTML e imágenes.
  • Usa herramientas como LiveReload para que tu proceso de desarrollo sea más fluido.

Antes de comenzar a codificar, debes considerar cómo optimizar y compilar la versión de producción de tu sitio. Configurar este flujo de trabajo desde el comienzo evita sorpresas desagradable al final del proyecto. Además, puedes agregar herramientas a tu flujo de trabajo que aceleren tu desarrollo y hagan las tareas monótonas por ti.

¿Qué es un proceso de compilación?

Un proceso de compilación es un conjunto de tareas que se ejecutan sobre tus archivos de proyecto. Este proceso compila y comprueba el código durante el desarrollo y se usa para crear la versión de desarrollo de tu sitio. Tu proceso de compilación no debe ser un conjunto de tareas que ejecutas al final de tu flujo de trabajo de desarrollo.

Las herramientas más populares para implementar un proceso de compilación son Gulp y Grunt, ambas herramientas de línea de comandos. Si no tienes experiencia con ninguna de ellas, te recomendamos usar Gulp, la herramienta que usamos para el Web Starter Kit.

Existen herramientas que incluyen GUI y que pueden ser más fáciles de manejar, pero que son menos flexibles.

Plataformas admitidas y nombre de la herramienta
OS X / Windows Prepros
OS X CodeKit
OS X HammerForMac

¿Qué tareas debe incluir un proceso de compilación?

En las siguientes secciones, veremos las tareas más comunes que debes incluir en tu proceso de compilación y las tareas recomendadas para Grunt y Gulp.

Para configurar cada parte como lo deseas, serán necesarios varios procesos de ensayo y error, lo cual puede ser desalentador si eres nuevo en los procesos de compilación.

Para ver un buen ejemplo de un proceso de compilación, consulta la guía de introducción para Web Starter Kit, que describe cómo usar Web Starter Kit y explica qué hace cada comando del archivo Gulp. Esta guía se puede usar para implementar una configuración rápida, y luego puedes hacer los cambios necesarios.

Si buscas crear tu propio proceso de compilación y eres nuevo con Gulp o Grunt, las guías de inicio rápido serán el mejor lugar para aprender a instalar y ejecutar tu primer proceso de compilación:

Usa la concatenación y la reducción para lograr un sitio más rápido

Para aquellos que no están familiarizados con los términos concatenación y reducción, concatenación significa simplemente fusionar varios archivos en uno, es decir, copiar y pegar distintos archivos en uno. El motivo para hacerlo es que es más efectivo que un navegador busque un solo archivo que varios archivos pequeños.

La reducción es el proceso de tomar un archivo y reducir la cantidad general de caracteres, sin cambiar el modo en que funciona el código. Un buen ejemplo es eliminar comentarios, o tomar un nombre largo de variable y hacerlo más pequeño. De esta manera, se reduce el tamaño del archivo y se aceleran las descargas.

Para hacer una reducción, usa lo siguiente:

Tipo de archivo Gulp Grunt
CSS gulp-csso grunt-contrib-cssmin
JS gulp-uglify grunt-contrib-uglify
HTML gulp-minify-html grunt-contrib-htmlmin

Para hacer una concatenación, usa lo siguiente:

Tipo de archivo Gulp Grunt
CSS (Sass) gulp-sass o gulp-useref grunt-contrib-sass o grunt-usemin
JS gulp-useref grunt-usemin o grunt-codekit

Nota: Puedes usar Sass y aprovechar la función "import" (Consulta Web Starter Kit para ver un ejemplo).

Optimiza tus imágenes

La optimización de imágenes es un paso importante para acelerar tu sitio. Te sorprenderás al ver cuánto puedes reducir una imagen sin que pierda calidad. Los meta datos se eliminan de la imagen, ya que el navegador no los necesita para mostrarla, por ejemplo, la información sobre la cámara usada para tomar la foto.

Para optimizar imágenes, puedes usar estos módulos.

Gulp y Grunt
gulp-imagemin grunt-contrib-imagemin

No te compliques con los prefijos de los proveedores

A menudo puede ser un poco tedioso incluir todos los prefijos de los proveedores para la CSS que usas. Usa un asignador de prefijos automático para agregar los prefijos que necesitas incluir automáticamente:

Gulp versus Grunt
gulp-autoprefixer grunt-autoprefixer

Nota
Si lo prefieres, puedes agregar un Paquete de Sublime para que incluya los prefijos automáticamente por ti.

Nunca dejes tu editor de texto con recarga en vivo

La recarga en vivo actualiza tu sitio en tu navegador cada vez que haces un cambio. Una vez que lo hayas usado, no podrás vivir sin él.

Web Starter Kit usa la sincronización del navegador para admitir Live Reload.

Gulp versus Grunt
browser-sync grunt-contrib-connect y grunt-contrib-watch