gulp.js y sus tareas

Hace poco les hable de como integrar Grunt con Font Awesome, y desde entonces me tope con gulp.js, que hace lo mismo que Grunt pero mas r谩pido y sencillo 馃榾

Integr谩ndolo en un proyecto para probarlo me tope con un dilema. Hay ciertas tareas que solamente quiero correr cuando estoy desarrollando y otras cuando estoy preparando para subir a producci贸n. En grunt lo hacia usando distintas tareas con diferentes opciones cada una:

De este modo tenemos un CSS comprimido (grunt build) listo para subir al servidor, y cuando estas desarrollando (grunt), el CSS sin comprimir y ademas se queda vigilando por cualquier cambio que se haga para volver a compilarlo.

Con 聽gulp podemos conseguir algo similar usando gulp-if:

Es bastante sencillo. Toma de par谩metro una condici贸n y una tarea a correr y solamente hay que pasarle un par谩metro a la hora de llamarlo: gulp build --type production. No est谩 mal, pero si la tarea build es la 煤nica que corro cuando quiero preparar el c贸digo para producci贸n, encontre un modo mas sencillo:

隆Y listo! Con solo eso, me basta correr gulp o gulp build para diferenciar cuando es desarrollo y producci贸n, sin par谩metros extra. Al final queda algo similar a esto:

Espero les sirva 馃檪

Usar Font Awesome con Grunt

Parte de lo que ando haciendo 煤ltimamente con Laravel incluye el manejo de assets, y aunque hay algunos paquetes para el manejo de estos dentro de Laravel, la mejor opci贸n parece ser usar Bower y Grunt, y la verdad es una maravilla.

En el proyecto con el que ando trabajando quiero usar Font Awesome para aprovechar la variedad de iconos que trae, y para eso necesitamos tanto el CSS (o SCSS en mi caso) como las fuentes que trae.

Primero que nada es instalar los assets con Bower, nuestro .bowerrc
es:

Y el bower.json:

Con esto corremos un bower install y esperamos que descargue los componentes.聽Para compilar el SCSS usamos el modulo grub-contrib-sass聽con la siguiente configuraci贸n:

En la pagina del plugin de grunt explica la configuraci贸n, pero b谩sicamente le decimos que nos compile el archivo app.scss en app.css, y dependiendo del ambiente en que queramos, si lo compila expandido (para desarrollo) o minificado (para producci贸n). La opcion de compass: true es debido a que estoy usando Foundation y con esto nos lee el archivo config.rb de Compass.

Dentro de mi app.scss solamente importo el SCSS de Font Awesome y listo, tenemos el CSS. 驴Y que pasa con las fuentes? Para esto uso el plugin grunt-contrib-copy, el cual como su nombre lo dice nos sirve para solamente copiar archivos. La configuraci贸n vendr铆a siendo algo como esto:

隆Y listo! Con esto nos copia todos los archivos de la carpeta Font-Awesome/fonts a public/fonts que es la ruta por default que usa el CSS de Font Awesome (considerando que nuestro css default esta en public/css/app.css).

Espero les ayude 馃檪