GULP – </> Codigo roto

Trabajando con Node.js

He empezado a profundizar con Node, que hasta ahora no lo usaba más que como un entorno donde correr Gulp y poco más.
Es muy sencillo y usa the-old-good JS de toda la vida sin más problemas ni lios. Las dependencias se inyectan de forma muy sencilla y puedes tener toda una aplicación en un solo archivo si no es necesario más.

De repente ya no quiero tanto a Gulp, me he dado cuenta de que casi todo para lo que usaba Gulp lo puedo hacer usando Node y usando los módulos NPM directamente sin esperar a que alguien los adapten a Gulp o mantengan actualizados.
Por ejemplo para automatizar los pantallazos de testing la única herramienta que he encontrado en Gulp usa PhantomJs, que es un proyecto abandonado y emplea un motor de render webkit con 10 años que ni siquiera acepta Flex. Sin embargo, usando Node directamente, puedo escribir un script que use Puppeteer y renderice con Chrome headless, compare produccion y stagging y me guarde pantallazos con los errores marcados en una carpeta. Tenemos que testar mas de 300 webs, y lo hace tan rápido que llamaron del servicio de hosting creyendo que estaba recibiendo un ataque DDoS (tuve que ralentizarlo)

Conforme más aprendo de Node menos uso Gulp y creo que en breve lo utilizare solo residualmente.

Aunque hasta el momento solo lo estoy usando como motor de script, empiezo a experimentar con servidores y es una verdadera gozada poder hacer un back-end sin salir de javascript, con las herramientas que antes estaban vetadas ejecutando en el cliente, como escribir archivos, manipular bases de datos, etc. cosas para las que hasta ahora necesitaba usar scripts intermedios en php.

Como bonus, es el lenguaje que utilizan las placas Arduino, con lo que si un dia me decido por fin a construir un ejercito de robots para destruir el mundo ya tengo parte del camino hecho.

En fin, que mola mucho.

Ventajas de usar SASS aunque no sepas SASS

Pongamos que por algún motivo no quieres o no puedes aprender SCSS (o LESS, o SASS, etc. son basicámente lo mismo). No vas a utilizar anidaciones, mixins, variables ni ninguna otra de las ventajas que ofrece y quieres seguir trabajando con CSS “plano”.
Aun así, tendrías que considerar usar SASS en tu flujo de trabajo por las siguientes razones:

Trabajarías exactamente igual

Los archivos .css son archivos validos para SCSS. No tendrías que aprender ninguna sintaxis nueva y puedes seguir usando los archivos que ya utilizas.

Mejorarías mucho la carga con archivos css modulares

Pongamos que cargas en tu web el ubicuo Bootstrap, el archivo .css de tu pagina y dos o tres .css externos, ademas de los @import con las fuentes que utilices de Google Fonts. Todos esos archivos hay que cargarlos por separado antes del render de la pagina y ralentizan mucho la fase más importante de la carga de una web. Si los incluyes como @imports de SASS en una hoja .scss y luego compilas, tendrás un único archivo .css (y una única llamada al servidor con todo lo que necesitas.

Te olvidas de los fallbacks

Si compilas con GULP en vez de con el propio SASS, ademas de compilar mucho más rápido, puedes incluir el plugin autoprefixer que añade los -webkit-, -moz-, -msfilter- etc. necesarios para visualizarse correctamente en todos los navegadores que le configures. Escribes el código de una forma mas rápida y limpia y te olvidas de tener que andar consultando caniuse.com e incluyendo manualmente los prefijos, que es un coñazo. Utiliza los dotas del propio caniuse.com y puedes incluso configurarlo cronológicamente. Yo lo configuro para todos los navegadores de los últimos 7 años.

Avisa de los errores.

Trabajando con .css puedes olvidar un punto y coma, o equivocarte en la ortografía, y no te darás cuenta hasta que visites la parte de la web afectada, SASS no te permite compilar un archivo si contiene errores, avisándote de su localización.

En fin, no necesitas aprender SASS/SCSS para empezar a utilizarlo y aprovechar muchas de sus ventajas. Luego empezaras a utilizar variables, anidaciones, etc. y te preguntaras como podías trabajar antes sin el.

Usando GULP

Estoy usando GULP como gestor de tareas y es una maravilla. Es como tener un becario (que dios y los becarios me perdonen…) para encargarle tareas repetitivas.

Antes usaba SASS para compilar archivos .scss, pero los hace uno a uno, y cuando tenia que compilar un modulo que empleaban 30 o 40 archivos .css se hacia lento esperar a que acabara. GULP carga todos los archivos en memoria antes de trabajar con ellos y es mucho mas rápido. Además, me permite utilizar plugins como autoprefixer, que añade los prefijos para asegurar compatibilidad con los navegadores que le configures, incluso cronológicamente, yo lo tengo configurado para que me ponga los prefijos necesarios hasta 7 años de antigüedad. Así puedo escribir código mucho más rápido sin tenerme que preocupar de los moz- y los webkit-

Tambien lo uso para concatenar y minificar los .js, de esta forma acabo generando un único .css y un único .js para toda la pagina web y carga como un tiro.

Al ser la sintaxis de sass como la de .css puedo introducir en la compilacion css ajenos , como los de los reproductores de video, ahorrandome archivos y llamadas al servidor.

También sirve muy bien para realizar tareas repetitivas que no pueden ser conseguidas con un simple batch. Tuve un caso similar al siguiente en el trabajo, localizar una serie de archivos html que hacían referencia a una imagen map.png que no estaba en su carpeta /img, generando un error 404.

Podría haber localizado los .html con un buscador por contenido, pero luego habría tenido que mirar carpeta por carpeta si el map.png se hallaba ahí, hablamos de unos 400 archivos html de los cuales la mitad podían estar en esa situación.

Os pongo el codigo utilizado en el script GULP que utilicé para localizarlos, con una explicación paso a paso de lo que hace:

 var gulp = require('gulp');  //carga gulp
 var contains = require('gulp-contains');  //carga plugin para buscar textos
 var fs = require('fs');  //carga plugin para buscar archivos
 var counter = 0;  //variable contador de archivos
 gulp.task('busca', function() {  //abre proceso 'busca'     
 gulp.src('es/**/trivia.txt')    //carga archivos sobre los que trabajar, todos  los html de todas las subcarpetas en la carpeta /es
 .pipe(contains({   //añade plugin contains
     search: 'map.png', //busca esta cadena
     onFound: function(string, file, cb) { //cuando la encuentre....
     try {
         fs.accessSync(file.path.slice(0, -10) + "img/map.png"); //...a partir del path del archivo, busca el archivo map.png
     } catch (e) { //si no lo encuentra...  
         counter ++;//actualiza el contador...
         console.log(counter +":"+ file.path.slice(0, -9)); //...y muestra la ruta  en la consola ("restando" map.png)
         return false }  //cierro  fs.accessSync                 
     return false;} //cierro search           
     }))    //cierro  contains
    .pipe(gulp.dest(function(file) {return file.base;})) });  //path de destino de los archivos *
gulp.task('default', ['check']);  //arranca al hacer gulp en el terminal

* en este caso, no seria necesario porque no realizo ningún proceso con los archivos, pero GULP lo necesita para funcionar correctamente, sino, detiene la búsqueda en los 16 primeros.