Útiles plugins para gulp

Cada día amo un poco más usar gulp. Poder automatizar un gran rango de tareas a un solo comando en la consola simplifica mucho el desarrollo. Aquí dejo una lista de plugins que estoy usando en casi todo proyecto:

gulp-load-plugins

En lugar de tener que estar cargando cada plugin a mano, este se encarga de hacerlo automáticamente.

gulp-uglify

Minifica javascript para tener un código más ligero para ponerlo en producción.

gulp-sass / gulp-less

Los nombres lo dicen, ¿no? Compila Less o Sass al CSS de todos los días.

gulp-autoprefixer

Deja de escribir a mano los prefijos para estilos en distintos navegadores, tampoco uses mixins de sass o less. ¡Mejor aplica Autoprefixer a tu CSS y olvídate de problemas!

gulp-combine-media-queries

No me gusta tener muchos @media en mi archivo CSS final, una manía. El otro día encontré este plugin que nos junta los media queries que tengamos y que se repitan. Pase de 81 @media a solamente 11. Un poco menos de peso :D

gulp-csso

Minifica CSS de una forma un poco diferente a otros plugins. Ver CSSO para mas información.

gulp-if

Simple condiciones para decidir que tareas realizar en base a variables.

gulp-sourcemaps

Nos permite generar sourcemaps en base a los archivos fuente, sin importar el procesado (compilar, autoprefixer, minificar, etc) que hagamos. Útil para debug.

gulp-concat

Para juntar varios archivos en uno mismo. ¡Menos peticiones al servidor!

gulp-watch

Se queda observando cambios a nuestros archivos para compilarlos de nuevo de forma automática.

 

Al final, un ejemplo de mi gulpfile.js podría ser algo así:

WordPress, Bootstrap 3 e IE8

Que horrible es desarrollar para Internet Explorer, sobretodo si es una versión tan vieja como la 8. Pero según los estudios de algunos clientes se sigue usando, así que por el mínimo porcentaje (que odio con toda mi alma) de gente que lo usa, hay que tenerlo en cuenta.

Resulta que hicimos un sitio de WordPress usando Bootstrap, lo cual facilita muchísimo el desarrollo de sitios responsivos. Como se acerca la entrega, tocó el turno de revisar como se ve en IE8, y… ¡casi muero de un infarto! Todo se veía fuera de lugar, las columnas no las respetaba, elementos por todos lados.. en fin, un caos. Buscando, vi que Bootstrap por default si soporta IE8 usando ciertos scripts:

Esto lo podía ver en el código fuente, por lo que no entendía porque nada funcionaba. Pero entonces llegó la iluminación:

Resulta que usando WordPress, tenemos la función wp_head que suele usarse en la etiqueta <head> para agregar estilos (entre ellos style.css, el estilo principal del theme), scripts, etc. El problema era que el genio de yo tenía puesto el código anterior de soporte para IE8 ANTES del wp_head(), por lo que el estilo se cargaba después y los scripts no hacían nada. Fue cuestión de cambiarlos de orden y ¡magia!, prácticamente todo se veía bien :D

Lo escribo para que no se me olvide en el futuro, aunque sinceramente espero no tener que hacer mas cosas para IE8.

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 :D

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 :)

Café Pendiente

Café Pendiente

Hace tiempo me encontré esta historia y me pareció una gran idea, aunque no lo pensé mucho mas. Hace unas semanas me tope con Café Pendiente, que es la iniciativa de la imagen aquí en México.

Como ahorita ando trabajando desde casa, estoy buscando lugares cómodos para distraerme de estar en un solo lugar y, aprovechando, comer/tomar algo rico. Así que en medio de esta búsqueda el día de ayer fui a algunos cafés que participan en el Café Pendiente, y según me dicen funciona bastante bien. Hay varias personas que lo pagan y otros tantos que van por el, sobretodo en las mañanas y noches (comprensible con el frío que esta haciendo).

Claro, me tome mi café y deje pagados unos pendientes. No cuesta mucho y ayuda a otros :)

 

Adiós 2013, no te voy a extrañar

No fue un año fácil, momentos tristes y decisiones difíciles lo marcaron. Pero al final lo que no nos mata nos hace más fuertes, o eso dicen.

Ahora toca empezar este 2014 con ganas y planes a lograr.

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 :)

El Alma de la ciudad

Venía platicando con Diana luego de una muy rica cena y caminata, casi todo el camino al son de Panchita Disco de el increíble grupo Burocracia Cósmica:

Vamos, escúchenla. ¿Listos? Bueno. Cuando íbamos pasando por el callejón donde solemos verlos tocar los domingos, ella empezó a tararear la canción, y en ese momento comencé a sentir como si la calle tuviera vida. Los músicos, las personas moviéndose al ritmo de la canción. Todo eso estaba presente. Los edificios también sentían la energía de la música, y ellos mismos comenzaban a moverse.

Nosotros seguíamos caminando, al pasar por Bellas Artes, ella dijo que las estatuas que están ahí también empezarían a bailar. Esas gorditas sexies, el buen Juárez montado a caballo, la torre latinoamericana, el edificio de Sears, los arbustos en la plaza y los árboles en la alameda. Todo moviéndose a un mismo ritmo, acompañados de la luz de una bella luna y alimentando de energía a los que ahí estábamos.

Fue increíble. Quería dejar constancia de ello para no olvidarlo. Así como mi tatuaje me recuerda cada día que debo seguir creyendo, sin importar las veces que me caiga, quiero que esto me recuerde todas las cosas que están esperando ser descubiertas.

Fuentes en el Monumento a la Revolución

Mi cuerpo y mente están cansados, tristes, sin ánimos. Pero mi alma sigue en pie.

Adiós 2011, Hola 2012

Es curioso que de taaaaanto que escribo en este lugar, las entradas de los últimos fines de año están en la misma página xD

Este año que acaba ha sido excelente. Mucho aprendizaje, tanto en el plano profesional como en el personal. Situaciones estresantes, entretenidas, dramaticas, alegres, tristes, divertidas, aburridas, etc. Muchas de estas me han confirmado que he aprendido mucho de el pasado, que cada vez tengo mas claro lo que quiero y el modo de llegar a ello. Me han dado mucha paciencia y sobretodo, me han mostrado que rendirse no es una opción.

En el trabajo, siento que he crecido mucho. Estoy en un lugar en el que me siento muy bien y cómodo, donde trabajo con personas muy creativas y con gran capacidad de aprender y enseñar. Ha habido meses muy pesados, con muchas desveladas  y mucho estrés, pero al final todo ha valido la pena y estoy muy contento con lo que hemos hecho. Mas que eso, me siento motivado a hacer mas cosas este 2012 :)

Desgraciadamente, la misma carga de trabajo de este año causó que descuidara alguna amistades… no pude ver cuanto hubiera querido a muchas personas, pero espero organizarme mas para corregir esto en próximas fechas. Después de todo, no sería quien soy de no haber sido por todos ellos. Pero no todo ha sido malo. Ha sido algo mas de un año de vivir con mi mejor amiga, y ciertamente ha sido de las mejores cosas que he hecho en mi vida xD las pláticas, los paseos, las vueltas en bici… todo ello tan invaluable n_n

Estos últimos dias antes de el cambio de año los pasé en casa, en Durango, y creo es la primera vez que vinieron a mi tantos recuerdos de tantos años. Creo es porque finalmente empiezo a aceptar muchas cosas del pasado, principalmente para dejar entrar lo que venga en un futuro. Y el futuro, en este momento, se ve increíble.

Bienvenido, 2012.