Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Configurar preprocesadores de CSS y JS

Los preprocesadores de CSS (como Sass), los preprocesadores y los transpiladores de JS pueden acelerar enormemente la programación cuando se usan de manera correcta. Aprende a configurarlos.

TL;DR

  • Los preprocesadores te permiten usar funcionalidades en CSS y JavaScript que tu navegador no admite de forma nativa; por ejemplo, variables de CSS.
  • Si usas preprocesadores, utiliza los mapas de origen para asignar tus archivos de origen iniciales a la salida representada.
  • Asegúrate de que tu servidor web pueda funcionar con mapas de origen.
  • Usa un preprocesador compatible para generar mapas de origen automáticamente.

¿Qué es un preprocesador?

Un preprocesador toma un archivo de origen arbitrario y lo convierte en algo que el navegador comprende.

Con una CSS como salida, el preprocesador está acostumbrado a agregar características que de otro modo no existirían (aún): variables de CSS, anidación, y mucho más. Algunos ejemplos destacados de esta categoría son Sass, Less y Stylus.

Con JavaScript como salida, realizan conversiones (compilaciones) desde un lenguaje completamente diferente o convierten (transpilan) un superconjunto o un estándar de un lenguaje nuevo al estándar actual. Algunos ejemplos destacados de esta categoría son CoffeeScript y ES6 (a través de Babel).

Depuración y edición de contenido preprocesado

Cuando abres el navegador y usas DevTools para editar tu CSS o depurar el código JavaScript, un inconveniente se vuelve notorio: lo que ves no refleja el origen y no ayuda realmente a solucionar el problema.

Para corregir esto, la mayoría de los preprocesadores modernos admiten una característica denominada mapas de origen.

¿Qué son los mapas de origen?

Un mapa de origen es un formato de asignación basado en JSON que crea una relación entre un archivo minificado y sus orígenes. Al realizar compilaciones para producción, además de minificar y combinar los archivos JavaScript se genera un mapa de origen que tiene información sobre los archivos originales.

¿Cómo funcionan los mapas de origen?

Por cada archivo CSS que produce, un preprocesador de CSS genera un archivo de mapa de origen (.map), además de la CSS compilada. El archivo de mapa de origen es un archivo JSON que define una asignación entre cada declaración de CSS y la línea correspondiente del archivo de origen.

Cada archivo CSS contiene una anotación que especifica la URL del archivo de mapa de origen, incorporado en un comentario especial en la última línea del archivo:

/*# sourceMappingURL=<url> */

Por ejemplo, en un archivo de origen Sass denominado styles.scss:

%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass genera un archivo CSS, styles.css, con la anotación sourceMappingURL:

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

A continuación, se ofrece un ejemplo de un archivo de mapa de origen:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Verificar que tu servidor web pueda funcionar con mapas de origen

Algunos servidores web, como Google App Engine, requieren una configuración explícita para cada tipo de archivo proporcionado. En este caso, los mapas de origen deben proporcionarse con un tipo MIME de application/json, pero Chrome, en realidad, aceptará cualquier tipo de contenido, por ejemplo application/octet-stream.

Extra: Uso de mapas de origen mediante un encabezado personalizado

Si no deseas agregar un comentario adicional al archivo, usa un campo de encabezado HTTP en el archivo JavaScript minificado para indicar a DevTools dónde encontrar el mapa de origen. Para esto se debe configurar o personalizar del servidor web, y el tema no se abarca en este documento.

X-SourceMap: /path/to/file.js.map

Al igual que el comentario, esto indica a DevTools y otras herramientas dónde buscar el mapa de origen asociado con un archivo JavaScript. Este encabezado también soluciona el problema de hacer referencia a mapas de origen en lenguajes que no admiten comentarios en una sola línea.

Preprocesadores compatibles

En la actualidad, prácticamente cualquier compilación al lenguaje JavaScript tiene una opción para generar mapas de origen, como Coffeescript, TypeScript, JSX, etc. Además, puedes usar mapas de origen en el lado del servidor dentro del nodo, en nuestra CSS mediante Sass, Less y otras opciones, con browserify, que brinda capacidades de estilo de nodo, y mediante herramientas de minificación, como uglify-js, que también agrega la estupenda capacidad de generar mapas de origen con varios niveles.

JavaScript

Compilador Comando Instrucciones
CoffeeScript $ coffee -c square.coffee -m La marca -m (--map) es lo único que necesita el compilador para generar un mapa de origen; también administra la adición de la directiva pragma del comentario sourceMapURL al archivo de salida.
TypeScript $ tsc -sourcemap square.ts La marca -sourcemap generará el mapa y agregará la directiva pragma de comentario.
Traceur $ traceur --source-maps=[file|inline] Con --source-maps=file, cada archivo de salida que termine en .js tendrá un archivo de mapa de origen que termine en .map; con source-maps='inline', cada archivo de salida que termine en .js tendrá al final un comentario que contendrá el mapa de origen codificado en una data: URL.
Babel $ babel script.js --out-file script-compiled.js --source-maps Usa --source-maps o -s para generar mapas de origen. Usa --source-maps inline para los mapas de origen insertados.
UglifyJS $ uglifyjs file.js -o file.min.js --source-map file.min.js.map Este es el comando más básico que se necesita para generar un mapa de origen para “file.js”. Esto agregará la directiva pragma de comentario al archivo de salida.

CSS

Compilador Comando Instrucciones
Sass $ scss --sourcemap styles.scss styles.css Sass admite los mapas de origen desde la versión 3.3.
Less $ lessc styles.less > styles.css --source-map styles.css.map Se implementa en la versión 1.5.0. Consulta el problema n.º 1050 para conocer los detalles y los patrones de uso.
Stylus $ stylus --sourcemaps styles.style styles.css Esto incorporará el mapa de origen como una string base64 codificada directamente en el archivo de salida.
Compass $ sass --compass --sourcemap --watch scss:css También puedes agregar `sourcemap: true` a tu archivo config.rb.
Autoprefixer Sigue el vínculo para aprender a usarlo e integrar un mapa de origen de entrada.

Mapas de origen y DevTools

Ahora que tienes los mapas de origen configurados correctamente, probablemente te resulte muy positivo saber que DevTools tiene compatibilidad integrada para mapas de origen basados en CSS y JS.

Edición de CSS preprocesadas

Consulta Editar en Sass, Less o Stylus para obtener más información sobre cómo editar y actualizar estilos vinculados con un mapa de origen directamente desde DevTools.

Edición y depuración de JavaScript preprocesado

Obtén más información sobre cómo depurar JavaScript minificado, compilado o transpilado en el panel Sources en Asigna código previamente procesado al código fuente.