La línea de comandos para el diseño web: potenciando el código front end

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Como diseñador web hay tres lenguajes que está garantizado utilizarás para trabajar de una u otra forma: CSS, HTML y Javascript. En éste tutorial vas a aprovechar la línea de comandos para que tu desarrollo con éstos tres lenguajes sea más poderoso y eficiente.

Aprenderás como usar la línea de comandos para:

Compilar código de preprocesador (Stylus, Sass y LESS) para CSS.
Escribir prefijos automáticamente en CSS
Comprimir, combinar y limpiar el CSS
Compilar Jade a HTML
Concatenar y minificar Javascript

Nota: éste tutorial asume que ya has completado los tutoriales previos en ésta serie. Si no lo has hecho, te parecerá útil regresar y leerlos antes de proceder.

Preprocesadores de CSS

Si nunca has trabajado con preprocesadores de CSS antes deja todo lo demás y prueba uno. Una vez que encuentras un preprocesador que te guste y que concuerde con tu estilo de codificar, es probable que nunca más vas a escribir código CSS como lo hacías antes.

Los tres preprocesadores que generalmente son considerados para elegir son Stylus, Sass / SCSS y LESS. Tuts+ tiene una impresionante gama de tutoriales y cursos para ayudarte a aprender como escribir la sintaxis de los tres preprocesadores.

En éste tutorial vamos a cubrir como puedes usar la línea de comandos para compilar código para cada uno de los tres.

Stylus

Cada usuario de preprocesador tiene un favorito, y el mío es Stylus. Usa una sintaxis minimalista que puede ser escrita rápidamente, tiene una funcionalidad poderosa, y es soportado por librerías de terceros como Jeet y Kouto-Swiss.

Puedes leer todo sobre Stylus en: http://stylus-lang.com/

Instalar Stylus

Para instalar Stylus globalmente, permitiéndote utilizarlo para compilar archivos ".styl" en cualquier lugar, ejecuta éste comando:

1	[sudo] npm install stylus -g

Compilar Stylus

La forma más fácil de compilar con Stylus es usar ésta línea de comando:

1	stylus < example.styl > example.css

Éste comando compilará "example.styl" a "example.css" en el mismo directorio.

Para explicarlo por partes tenemos stylus para ejecutar el comando. Luego usamos un < example.styl para indicar el archivo de entrada Stylus, seguido por > example.css para denotar el nombre del archivo CSS que queremos crear.

También tienes la opción de añadir opciones adicionales a éste comando, como usar la opción --compress para remover espacios en blanco del archivo CSS resultante:

1	stylus --compress < example.styl > example.css

Como una alternativa para compilar un archivo a la vez, puedes compilar todos los archivos Stylus en un directorio a archivos CSS en otro directorio. Para hacer ésto, después del comando stylus, especifica el directorio fuente, luego usa la opción --out seguido por el directorio de destino.

Por ejemplo, para compilar todos los archivos Stylus de un directorio llamado "source_files" a "assets/css" usa:

1	stylus source_files --out assets/css

Nota: el directorio para el que estás compilando debe existir ya antes de que ejecutes el comando pues no realizará la tarea si no puede encontrar el directorio especificado para dar salida a los archivos CSS.

Hay otras opciones que puedes aprovechar cuando se usa Stylus vía la línea de comandos. Para leer todos sobre ellas visita: http://stylus-lang.com/docs/executable.html

Sass / SCSS

Sass es muy probablemente el preprocesador más popular en éste momento. Es increíblemente poderoso en los resultados que se puede obtener y tiene una vasta y activa comunidad. Es soportado por librerías de terceros bien conocidas como Compass, Bourbon y Susy.

Lee más sobre Sass en: http://sass-lang.com/

Tienes dos opciones cuando se trata de compilar Sass en tu máquina: puedes usar Ruby para manejarlo, o puedes usar LibSass.

Sass primero fue creado para ejecutarse en Ruby, así que si buscas soporte y funcionalidad al 100%, es la opción que quisieras escoger. Por ejemplo, si quieres usar Compass, la forma más fácil es apegarte a la compilación Ruby.

LibSass fue creado como una alternativa, y una de las opciones que lo hace disponible es compilar sass via un paquete npm. Éste planteamiento compila sass mucho más rápido, reduciendo el tiempo de compilación de aproximadamente cinco segundos a través de Ruby a menos de medio segundo a través de LibSass. Sin embargo, puedes encontrar que no son soportadas ciertas características y código de terceros.

Tu elección ser basará completamente en la preferencia, pero sugeriría ir con LibSass por velocidad a menos de que haya algo específico para lo que necesites la compilación Ruby.

Sin importar tu elección, abordaremos ambas opciones así que estarás preparado para cualquiera.

Instalar Ruby Sass

Para compilar Sass via Ruby, primero necesitarás tener Ruby instalado en tu máquina.

Si estás en Mac tienes suerte pues Ruby ya viene preinstalado así que no tienes que hacer nada.

Si estás en Windows, dirígete a http://rubyinstaller.org/ entonces descarga y ejecuta el instalador que encuentras ahí. Posteriormente, instala Sass al ejecutar éste comando:

1	[sudo] gem install sass

Sass debería ser descargado e instalado automáticamente por tí. Para corroborar que la instalación ha sido exitosa ejecuta el comando:

sass -v

Deberías ver el número de versión y el nombre de tu instalación desplegados en tu terminal:

Compilar con Ruby Sass

Para compilar un archivo usando Ruby sass sólo escribe sass, seguido por el nombre del archivo de entrada, un espacio, luego el nombre que quisieras que tuviera el archivo compilado CSS.

1	sass source_file.scss compiled_file.css

Watch con Ruby Sass

Ruby Sass también tiene una función "watch" integrada (cubriremos más de ésto posteriormente) que se percatará de cambios en tus archivos y automáticamente los recompilará cada vez que sean guardados.

Para usarla, agrega la opción --watch a tu comando, luego separa los nombres de tu archivo fuente y archivo compilado con dos puntos en lugar de un espacio:

1	sass --watch source_file.scss:compiled_file.css

Puedes también especificar todos los directorios en los que aplicar la función watch y a cuales serán los directorios resultantes, en lugar de archivos individuales, así:

1	sass --watch source/sass:assets/css

Una vez que se inicia watch deberías ver algo como ésto en tu terminal:

Obteniendo Más Información sobre Comandos

Para leer sobre todas las opciones disponibles vía la línea de comandos con Ruby Sass ejecuta:

1	sass --help

Una guía de las opciones de la línea de comandos será mostrada en tu terminal:

Puedes usar ésta opción --help para obtener más información sobre cualquier comando que uses: Sólo escribe el nombre del comando seguido por --help y obtendrás información similar a la mostrada arriba en cada caso.

Instalar LibSass /node-sass

Si eliges LibSass, puedes iniciar con el mismo método que usaste para instalar paquetes npm previamente en ésta serie de tutoriales.

El mismo LibSass está escrito en C/C++ pero hay varias implementaciones de él, incluyendo algunas hechas para trabajar con Node.js. En nuestro caso usaremos el paquete node-sass.

Para instalar node-sass globalmente, ejecuta éste comando:

1	[sudo] npm install node-sass -g

Compilar con node-sass

Para compilar un archivo escribe node-sass seguido por el nombre del archivo fuente y el nombre que quisieras darle al archivo compilado CSS.

1	node-sass source_file.scss compiled_file.css

Para controlar que el directorio de tu archivo CSS está compilado agrega la opción --output y el directorio de destino entre los nombre de tus archivos de entrada y resultante:

1	node-sass source_file.scss --output assets/css compiled_file.css

Cuidado con node-sass

Como Ruby Sass, node-sass también usa la opción --watch para permitir compilación automática de tus archivos que modificas:

1	node-sass --watch source_file.scss compiled_file.scss

También puedes especificar todos los directorios a los cuáles aplicar la función watch, y a cuales serán destinados, en lugar de manejar archivos individuales:

1	node-sass --watch source/sass/* --output assets/css

Cuando se usa node-sass para cuidar todo un directorio, asegúrate de incluir /* al final para especificar que quieres todos los archivos que incluye.

Deteniendo un Proceso "watch"

Cuando tienes un proceso "watch" ejecutándose puedes detenerlo ya sea:

Cerrando la terminal
Presionando CTRL + C

LESS

El preprocesador LESS es también muy popular, y es probablemente bien conocido por su empleo en el framework Twitter Bootstrap. LESS es un gran primer preprocesador con el que empezar a trabajar pues es muy similar a escribir CSS.

Lee más sobre LESS en: http://lesscss.org/

Instalar LESS

Para instalar LESS globalmente, permitiéndote usarlo para compilar archivos ".less" en cualquier parte, ejecuta éste comando:

1	[sudo] npm install less -g

Compilar LESS

Abre una terminal en el directorio que alberga el archivo LESS que quieres compilar y usa el comando lessc seguido por el nombre del archivo, un símbolo >, luego el nombre que quieras que tenga el archivo compilado CSS:

1	lessc source_file.less > compiled_file.css

Poner prefijos en CSS automáticamente

Autoprefixer es un paquete npm que revisa con CanIUse.com para obtener información actualizada sobre que propiedades CSS necesitan prefijos y cuáles no. Luego automáticamente maneja la inclusión de prefijos requeridos en tu código.

Ésto puede ser increíblemente útil, pues al menos que estés monitoreando constantemente las actualizaciones de navegadores, puedes fácilmente estarincluyendo prefijos de navegadores que realmente ya no necesitas. Significa también que puedes escribir todo tu CSS sin tener que pensar en prefijos, y dejar que Autoprefixer se encargue de ellos por tí.

Por ejemplo, autoprefixer convertirá éste código:

1	a {
2	display: flex;
3	}

...en éste:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Lee más sobre Autoprefixer en: https://www.npmjs.com/package/autoprefixer

Instala Autoprefixer

Instala Autoprefixer globalmente con:

1	[sudo] npm install autoprefixer -g

Aplica Autoprefix a un archivo CSS

Para aplicar autoprefix en un archivo CSS usa el siguiente comando:

1	autoprefixer style.css

A diferencia de compilar un archivo de preprocesador, éste no creará un segundo archivo por defecto. El archivo que especificas será actualizado, con los prefijos correctos añadidos directamente.

Si quieres que Autoprefixer genere un segundo archivo separado agrega la opción --output seguido por un nombre para tu archivo css con los prefijos:

1	autoprefixer unprefixed.css --output prefixed.css

Optimizando CSS

Siempre quieres que el CSS que despliegues en tus sitios sea reducido al tamaño menor posible. Para lograr ésto puedes utilizar técnicas de optimización:

Compresión - remover espacios en blanco y comentarios
Limpieza - modificar el código mismo para que tome menos espacio

Comprimiendo con Preprocesadores

Stylus, Ruby Sass y node-sass todos tienen la capacidad para comprimir tu CSS durante la compilación.

En Stylus, incluye la opción --compress

1	stylus --compress < source_file.scss > compiled_file.css

En Ruby Sass incluye la opción --style, seguido por compressed:

1	sass source_file.scss compiled_file.css --style compressed

En node-sass agrega la opción --output-style seguida por compressed:

1	node-sass --output-style compressed source_file.scss compiled_file.css

Limpiando y Comprimiendo con clean-css

Si no estás usando preprocesadores de CSS, o sólo quieres una máxima optimización de código, puedes usar el paquete clean-css que pondrá tus archivos CSS en un proceso de máxima compresión.

Procesos de compresión regular típicamente sólo remueven espacios en blanco y comentarios de tu CSS. El paquete clean-css por otro lado puede también hacer cosas como:

Combinar nombres de selector duplicados
Combinar propiedades duplicadas dentro del mismo estilo
Redondear números con muchos decimales
Remover puntos y comas y espacios al final de los estilos del selector

Combinar selectores duplicados puede ser útil, por ejemplo, deberías querer tener todo el maquetado para una cierta clase inicialmente en un "layout.css" mientras los colores para la misma clase estuvieran inicialmente en un "colors.css"

Redondear números es magnífico para cuando has usado una función de preprocesador buscando convertir un valor en unidades rem y finalizas con algo como 2.3649858573. Con clean-css ese número sería redondeado a dos decimales, resultando un valor más claro como 2.36rem.

Puedes leer más sobre clean-css en: https://github.com/jakubpawlowicz/clean-css

Instala clean-css

Instala clean-css globalmente con el comando:

1	[sudo] npm install clean-css -g

Usa clean-css

Para limpiar un archivo CSS usa:

1	cleancss style.css

Nota: Aunque el nombre del paquete "clean-css" tiene un guión, asegúrate usar cleancss sin un guión para empezar tus comandos.

Para especificar un nuevo nombre de archivo para clean-css usa la opción -o seguida por el nuevo nombre de archivo, antes del nombre del archivo que estás especificando:

1	cleancss -o cleaned.css style.css

Hay otras opciones de comando disponibles para clean-css, que puedes leer en: Como usar Clean CSS CLI.

HTML & Javascript

Jade

Jade es un sorprendente lenguaje que compila en HTML, y hace posible escribir tu código brevemente así que el desarrollo es mucho más rápido, y crea tus propios sistemas de plantillas con lo que te ahorra la repetición de escritura de código.

Lee más sobre Jade en: https://www.npmjs.com/package/ade

Instalar Jade

Para instalar Jade globalmente ejecuta el comando:

1	[sudo] npm install jade -g

Compilar Jade

Jade, creado por la misma persona que Stylus, usa la misma sintaxis básica de comandos con los signos < y > para compilar un archivo:

1	jade < index.jade > index.html

Éste comando compilará "index.jade" a "index.html" en el mismo directorio.

Para compilar todos los archivos Jade en un cierto directorio usa:

1	jade dir_name

Para establecer el directorio que quieres en el que se escriban tus archivos HTML coloca la opción --out entre el nombre de los directorios de entrada y salida:

1	jade src_dir --out html_dir

Para usar la función watch de Jade para compilación automática al guardar, pasa la opción --watch justo después del comando jade.

Para archivos individuales:

1	jade --watch < index.jade > index.html

O para directorios completos:

1	jade --watch dir_name

1	jade --watch dir_name --out html_dir

Concatenando & Minificando Archivos Javascript

Así como queremos que los archivos CSS que desplegamos sean optimizados, así también queremos entregar nuestros archivos Javascript en la forma más eficiente posible.

Es común para nosotros tener múltiples archivos JS en nuestros proyectos, tal como necesitamos Modernizr, jQuery y nuestro propio código por ejemplo, pero también queremos minimizar el número de peticiones http que hace nuestro sitio. Adicionalmente queremos asegurarnos que el tiempo de carga para nuestros archivos Javascript sea super rápido.

La mejor forma de manejar ambos asuntos es concatenar simultáneamente nuestros archivos Javascript en un sólo archivo, significando que sólo necesitaremos una petición http para cargar, y minificar el archivo resultante a su menor tamaño posible.

Usaremos el paquete UglifyJS para que se encargue de éste proceso.

Para instalar uglify-js globalmente ejecuta:

1	[sudo] npm install uglify-js -g

Para combinar dos archivos Javascript entonces elimina espacios en blanco y comentarios del archivo resultante, usa el comando uglifyjs seguido por los nombres de cada uno de tu archivos fuente con espacios en su interior. Después de ello incluye la opción --output y el nombre que quieres que tenga tu nuevo archivo combinado y minificado:

1	uglifyjs input1.js input2.js --output input.min.js

Así como la eliminación por defecto de espacios en blanco y comentarios, también puedes añadir compresión que modificará el código para reducir su tamaño. Para hacer ésto agrega la opción --compress al final del comando:

1	uglifyjs input1.js input2.js --output input.min.js --compress

Otra opción de optimización disponible es "exprimir" el código, que hará cosas como reducir nombres de variable, funciones y argumentos a un caracter. Para usar ésta opción agrega la opción --mangle al final del comando:

1	uglifyjs input1.js input2.js --output input.min.js --mangle

Puedes también utilizar compresión y la función de exprimir (mangle) al pasar ambas opciones:

1	uglifyjs input1.js input2.js --output input.min.js --mangle --compress

Lee más sobre comandos que puedes ejecutar con UglifyJS en: https://www.npmjs.com/package/uglify-js

Una Nota sobre Minificación de Javascript de terceros

Si estás combinando y/o minificando scripts de terceros como jQuery, Modernizr, etc, asegúrate de usar las versiones extendidas de esos archivos. Es generalmente una mala idea volver a minificar archivos que ya han pasado por éste proceso ya que puedes afectar su funcionalidad.

Puedes identificar archivos que ya han sido minificados pues típicamente seguirán la convención de nomenclatura de "nombre.min.js", mientras la versión expandida del archivo será "nombre.js".

En el Próximo Tutorial

Ahora sabes cómo completar algunas tareas increíblemente útiles con varios comandos, pero ¿Qué tal si pudieras completar todas las tareas que tu proyecto necesita al mismo tiempo con un solo comando?

En el próximo tutorial aprenderás como hacer exactamente eso, usando ejecutores de tareas para configurar todas las tareas que tu proyecto necesita, así que toda tu compilación, aplicación automática de prefijos, combinación, y optimización puede hacerse a la vez y en unos cuantos segundos.

¡Nos vemos en el próximo tutorial!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!