Grunt mejora el WPO y el SEO de tu web

Grunt mejora el WPO y el SEO de tu web. En una web, hay que realizar un montón de tareas comunes en el desarrollo de un proyecto web. Grunt mejora el WPO y el SEO de tu web. Es decir te puede ayudar a mejora el Google Page Insights de Google y por lo tanto el WPO y el SEO de tu Web.

Las web rápidas las premia Google. Si queremos automatizar y evitar tener que realizar todos esos procesos repetitivos o tareas de mantenimiento de una Web podemos utilizar Grunt, un ejecutor de tareas de Javascript.

Primeros pasos con Grunt. Grunt mejora el WPO y el SEO de tu web

Compilar los archivos de pre-procesadores, optimizar las imágenes o reducir el tamaño de los archivos de Javascript nos generar mucha c arga de trabajo y tiempo de nuestros desarrolladores.

Te imaginas que el sistema con unos ficheros de configuración te haga tu trabajo y automáticamente detecte cambios y genere ficheros optimizados para mejorar el Web Performance Optimization de tus desarrollos para Internet. Pues estamos de enhorabuena Grunt hace todo eso y nos podemos olvidar de algunas tareas manuales o tareas .sh de servidor complejas. Yo desde que lo descubrí he ganado en tranquilidad como director de desarrollo de un equipo. Ya no viven bajo la tiranía de Google con el SEO y el WPO como directrices. Si se puede automatizar mucho mejor y que los desarrolladores se dedique a lo que saben y donde rinden que es desarrollar y no a tener tareas repetitivas.

¿Qué es Grunt?

Grunt.js es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs.

Con un simple fichero JS que llamaremos Gruntfile, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

¿Cómo instalar Grunt?

Lo primero que necesitamos es instalar Grunt de manera global en nuestro equipo de desarrolladores. Para trabajar con Grunt, necesitamos tener instaladas en nuestro equipo Node.js, un sistema para poder ejecutar Javascript fuera del navegador. La instalación de Node.js es muy sencilla tan solo hay que visitar la web (Nodejs)

En https://nodejs.org/en/ podemos encontrar el instalador para Windows de node.js.

Instalación de NodeJS en Windows

Si estás en Windows, al pulsar sobre Install te descargará el instalador para este sistema, un archivo con extensión «msi» que como ya sabes, te mostrará el típico asistente de instalación de software.Una vez descargado, ejecutas el instalador.

Instalación de NodeJS en Linux.

En Linux puedes instalarte node.js siguiendo esta entrada https://github.com/nodejs/node-v0.x-archive/wiki/Installing-Node.js-via-package-manager

En mi Ubuntu he ejecutado los siguientes comandos para instalar la última versión:

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm

Probando los primeros comandos NodeJS

En NodeJS la consola de Node puedes escribir instrucciones Javascript. Si lo deseas, puedes mandar mensajes a la consola con console.log() por lo que ésta podría ser una bonita instrucción para comenzar con node:

node
console.log(«hola mundo»);
console.log(18+1);

Te mostrará el mensaje «hola mundo» en la consola y 19.

Una vez tenemos node.js llegamos a la instalación de de Grunt

Comandos para instalar Grunt

Para ello tecleamos estos dos comandos en al shell de nuestro sistema operativo Linux:

$ sudo npm install -g grunt
$ sudo npm install -g grunt-cli

En Windows abrimos la consola cmd.exe y escribimos:

npm install -g grunt-cli

Primeros pasos con Grunt

Vamos a partir de una carpeta en nuestro disco duro como haríamos en cualquier proyecto con la siguiente estructura:

/proyecto
/proyecto/js-original/
/proyecto/js/
/proyecto/img-original/
/proyecto/img/

Lo primero que hacemos con nuestro editor de textos el el raiz de /proyevto el archivo package.json

El el archivo package.json sirve para poder controlar las dependencias y los metadatos del proyecto.Empezamos con el siguiente contenido inicial:

{
«name»: «proyecto-frikipandi»,
«version»: «0.0.1»
}

Poner los valores de nombre y versión que necesites. Iremos con nuestro cmd.exe o con nuestra consola Linux al directorio proyecto

cd proyecto

Una vez dentro del proyecto, instalaremos el módulo de Grunt, escribiendo:

npm install grunt –save-dev

Si abrimos ahora el archivo packaged.json creado anteriormente, veremos que se ha actualizado incluyendo el módulo de Grunt como dependencia.

{
«name»: «proyecto-frikipandi»,
«version»: «0.0.1»,
«devDependencies»: {
«grunt»: «^0.4.5»,

}
}

También se habrá creado una carpeta en la raiz del proyecto llamada node_modules donde se irán almacenando todos los plugins que vayamos instalando. Los plugins es la manera de extender las funcionalidades ya hay más de 3.000 plugins de Grunt (http://gruntjs.com/plugins). Para mejorar WPO y SEO vamos a usar unos cuantos plugins.

El siguiente paso es crear un segundo archivo, que cuelgue también de la raíz al que llamaremos Gruntfile.js. Es el fichero donde configuraremos las tareas. Lo editamos con el siguiente contenido :

module.exports = function(grunt){

grunt.initConfig({

});

};

Hasta aquí las instalaciones y configuraciones básicas en Grunt. Ahora es el momento de poner alguna tarea para ahorrar trabajo como reducir el tamaño de nuestros Javascript o minimizar los CSS. Vamos a ponernos manos a la obra. Lo mejor de todo es que si lo haces Grunt mejora el WPO y el SEO de tu web sin que te des cuenta y ahorras en ancho de banda y mejoras los tiempos de carga.

Minificar los ficheros Javascript con uglify

Una mejora de WPO al minificar los archivos de Javascript lo que estamos buscando es unir y comprimir en un único archivo todos los archivos .js. El orden es muy importante para evitar problemas de dependencia, en el caso del ejemplo he incluido primero todos los archivos .js de la carpeta js-original y después el archivo scripts.js en la carpeta js que es el que usaremos en la web.ella.

Cada una de las tareas en Grunt sigue el mismo patrón:

El primer paso Instalar el plugin desde la consola.

Para minificar/uglificar los archivos de Javascript usaremos el plugin grunt-contrib-uglify y para instalarlo hay que escribir esto en la consola:

npm install grunt-contrib-uglify –save-dev

Como hemos visto antes, se actualizará el archivo packaged.json con la nueva dependencia.

El segundo paso escribir la tarea en el archivo Gruntfile.js.

Abrimos el archivo Gruntfile.js y añadimos la línea

grunt.loadNpmTasks(‘grunt-contrib-uglify’);

Tercer paso programamos la tarea para hacer lo que queremosen Gruntfile.js

Este paso será personalizado para cada tarea y lo ideal es consultar la documentación de cada plugin que suele estar incluida en GitHub. En nuestro caso vamos a juntar varios archivos js en un y lo vamos a

compactar para mejorar nuestro SEO y WPO. Tenemos el nombre de la tarea (uglify) y en su interior añadimos un target (my_frikipandi) con las acciones y los archivos necesarios para llevarlas a cabo.

module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_frikipandi: {
files: [
{‘js/publicidad-min.js’: [‘js-original/publicidad.js’]},
{‘js/scripts-min.js’: [‘js-original/jquery.1.11.1.js.’,’js-original/jquery.cookie.js’, ‘js-original/funciones.js’]},
] }
}

});

grunt.loadNpmTasks(‘grunt-contrib-uglify’);

};

La tareas puedan llevar uglify puede tener parámetros de configuración. Lo mejor es consultar la documentación de cada plugin.

Ahora ejecutamos la tarea en la consola la orden:

grunt uglify:my_frikipandi

El archivo resultante scripts-min.js estará minificado y se alojará en la carpeta js.

Vigilar los cambios de archivos con Watch. Indispensable para que Grunt mejora el WPO y el SEO de tu web

Esto es muy útil para un entorno de trabajo de varias personas o de una sola, donde tengamso un entorno con control de versiones GIT con por lo menos dos entornos de desarrollo y producción. Una vez se prueba todo con los js originales, al subirlos a producción cada vez que los cambiamos o modificamos algo deberíamos volver a la consola para ejecutar la tarea. Lo mejor es automatizar el proceso con Watch.

El plugin llamado grunt-contrib-watch nos da esa funcionalidad. Este plugin se encargara de vigilar si estamos realizando cambios en algún archivo y en caso afirmativo ejecutará la tarea o tareas que le indiquemos a Grunt. Muy útil para compactar JS, minificar CSS o optimizar imágenes todo orientado al WPO y SEO de nuestra página Web o proyecto.

La forma de instalarlo es parecida al anterior plugin. Escribimos en la consola:

npm install grunt-contrib-watch –save-dev

Añadimos la tarea a Gruntfile.js:

grunt.loadNpmTasks(‘grunt-contrib-watch’);

Y por último, incluimos la configuración de la tarea para que se vuelva a ejecutar la tarea uglify caba vez que modifiquemos un js original. Para ello añadimos lo siguiente:

module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_frikipandi: {
files: [
{‘js/publicidad-min.js’: [‘js-original/publicidad.js’]},
{‘js/scripts-min.js’: [‘js-original/jquery.1.11.1.js.’,’js-original/jquery.cookie.js’, ‘js-original/funciones.js’]},
] }
},
watch: {
files: [‘js-original/publicidad.js’,’js-original/jquery.1.11.1.js’,’js-original/jquery.cookie.js’, ‘js-original/funciones.js’],
tasks: [‘uglify’] }

});

grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.registerTask(‘default’, [‘uglify’]);
};

Para ver como funciona, nos vamos a la consola y escribimos grunt watch. A partir de ahora, si hacemos un cambio a un archivo .js del listado dentro de la carpeta js-original, se actualizará automáticamente el archivo scripts_min.js

Otro ejemplo de uglify poniendo nombre y fechas en lo generado por uglify:

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n’
},
build: {
src: ‘src/<%= pkg.name %>.js’,
dest: ‘build/<%= pkg.name %>.min.js’
}
}
});

grunt.loadNpmTasks(‘grunt-contrib-uglify’);

grunt.registerTask(‘default’, [‘uglify’]);

};

CSSMIN Minificar el css con Grunt

cssmin. Con este plugin minificamos el fichero css resultante en una sola línea de texto para que sea menos pesado y nuestra aplicación web tarde menos en cargar. Grunt posee diversos plugins para tareas específicas, usaremos, grunt-contrib-stylus, grunt-contrib-cssmin y grunt-contrib-bg-shell. Estas librerías nos permitirán preprocesar stylus, convertirlo a CSS, minificar el CSS y ejecutar instrucciones por linea de comandos respectivamente. Mejorar los CSS es básico y Grunt mejora el WPO y el SEO de tu web al mejorar los CSS de tu proyecto.

La forma de instalarlo es parecida al anterior plugin. Escribimos en la consola:

npm install grunt-contrib-cssmin –save-dev
npm install grunt-contrib-stylus –save-dev
npm install grunt-contrib-bg-shell –save-dev

Añadimos la tarea a Gruntfile.js:

grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
grunt.loadNpmTasks(‘grunt-contrib-stylus’);
grunt.loadNpmTasks(‘grunt-contrib-bg-shell’);

Un ejemplo para los css

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),

bgShell: {
runNode: {
cmd: ‘node app.js’,
bg: true
}
},

stylus: {
compile: {
options: {
paths: [stylesheetsDir],
‘include css’: true
},
files: {
‘css/app.min.css’: stylesheetsDir + ‘/index.styl’
}
}
},

watch: {
stylesheets: {
files: [stylesheetsDir + ‘/**/*.styl’, stylesheetsDir + ‘/**/*.css’],
tasks: [‘stylus’],
options: {
interrupt: true
}
}
}
});

Comprimir las imágenes con Grunt

Una tarea básica, pero laboriosa, es optimizar y comprimir las imágenes de un proyecto para mejorar los tiempos de carga. Con Grunt existe un plugin que se encarga de hacerlo, grunt-contrib-imagemin. Lo que queremos es que todas las imágenes .gif, .jpg, .png o .svg incluidas en /img-original/ se optimicen y se guarden en la carpeta /img/.

La forma de instalarlo. Escribimos en la consola:

npm install grunt-contrib-imagemin –save-dev

Añadimos la tarea a Gruntfile.js:

grunt.loadNpmTasks(‘grunt-contrib-imagemin’);

Habilitar dentro de Gruntfile.js :

grunt.loadNpmTasks(‘grunt-contrib-imagemin’);

Y configurar:

imagemin: {

main: {

files: [{
expand: true,
cwd: ‘img-original/’,
src: [‘**/*.{png,jpg,gif,.svg}’],
dest: ‘img/’
}]

}

}

Para que el proceso se realice automáticamente, hay que recordar añadir un nuevo target a la tarea con el plugin de watch.

imagemin: {

main: {

files: [{
expand: true,
cwd: ‘img-original/’,
src: [‘**/*.{png,jpg,gif,.svg}’],
dest: ‘img/’
}]

},watch: {
images: {

files: [‘img-original/*.{png,jpg,gif}’],
tasks: [‘imagemin’],
options: {
spawn: false,
}

}
}

}

El principal problema que tiene este plugin es que como tengas muchas imágenes el proceso se hace muy muy lento. Además la tarea vuelve a comprimir todas las imágenes cada vez que se ejecuta así que hay que buscar una solución o ponemos directorios por fechas o tiramos de la documentación de Grunt y buscamos un plugin. Existe un plugin que detecta qué imágenes se han añadido recientemente a la carpeta y trabaja con ellas. Se llama grunt-newer.

Instalación desde la consola:

La forma de instalarlo. Escribimos en la consola:

npm install grunt-newer –save-dev

Habilitar dentro de Gruntfile.js :

grunt.loadNpmTasks(‘grunt-grunt-newer’);

En este caso no lleva configuración, solo tenemos que añadir la tarea newer dentro de la tarea watch de las imágenes:

watch: {
images: {

files: [‘img-original/*.{png,jpg,gif}’],
tasks: [‘newer:imagemin’],
options: {
spawn: false,
}

}
}

SASS y COMPASS con Grunt. Mojaramos la forma de trabajar con CSS

La compilación de los archivos de los procesadores es otra de las funciones que podemos usar con Grunt. Existen plugins para LESS, Sass o Stylus que vimo en un ejemplo anterior.

En mi caso uso Sass + Compass, por lo que siempre instalo el plugin de este último. *Es necesario tener previamente instalados tanto Sass como Compass.

La forma de instalarlo. Escribimos en la consola:

npm install grunt-contrib-compass –save-dev
npm install grunt-contrib-sass –save-dev

Añadimos a Gruntfile.js

grunt.loadNpmTasks(‘grunt-contrib-compass’);

Para gestionar la tarea, solo hay que indicar el valor del archivo de configuración de Compass (config.rb) y en mi caso, siempre activo los source maps. Si quieres saber para que pueden servir los source maps usa Google para buscar la documentación sobre ellos.

compass: {
dist: {
options: {
config: ‘config.rb’,
sourcemap: true
}

}
}

Por ultimo, añadimos un nuevo target a la tarea watch, para que actualice automáticamente los .css, cada vez que cambiemos cualquier archivo .scss El doble asterisco le estamos diciendo que incluya todas las

subcarpetas

watch: {

scss: {
files: ‘scss/**/*.scss’,
tasks: [‘compass’] }
}

Hay otros plugins interesantes para Grunt

Autoprefixer (grunt-autoprefixer) el plugin para poder gestionar los vendor prefixes en las propiedades CSS3.Funciona como un post-procesador, analiza el CSS resultante de la compilación con Sass y añade o quita los vendor prefixes usando la base de datos de Can I Use.

Browser-Sync (grunt-browser-sync) que nos va a permitir ver una versión sincronizada de nuestras páginas en el navegador, actualizándose cada vez que realicemos un cambio en algún archivo ya sea un HTML, un js, un CSS o una imagen.

bgShell:runNode Con este plugin indicamos un comando para ejecutar por el interprete.

stylus Con ella preprocesamos los ficheros .styl que tengamos a un único fichero .css (Stylus es un preprocesador de CSS como lo son Compass, Sass, Less y funciona bajo Node.js 😉

grunt-contrib-qunit,grunt-contrib-concat,grunt-contrib-jshint ya hay muchos plugins que nos facilitan el trabajo y que Grunt mejora el WPO y el SEO de tu web

Registrar la tarea por defecto con Grunt

Un último paso necesario es registrar la tarea o tareas que queramos que Grunt ejecute por defecto (default). Para ello añadimos al final de nuestro archivo Gruntfile.js:

grunt.registerTask(‘default’, [‘uglify’,’watch’]);

Si queremos la tarea por ejemplo de comprimir los javascript para mejorar nuestro SEO o WPO

Así cada vez que escribamos grunt en la consola, estaremos ejecutando la tarea uglify y watch, en ese orden.

Esto es solo una muestra de lo potente que puede llegar a ser Grunt y del tiempo que nos puede llegar a ahorrar. Actualmente existen mas de 3.000 plugins de Grunt, puedes consultarlos todos a traves de la web http://gruntjs.com/plugins . Si quieres ahorrar tiempo os animamos a usarlo.

Por último os dejo un ejemplo de varios plugins funcionado a la vez con Grunt.

El fichero package.json con los plugins instalados por consola

{
«name»: «proyecto-frikipandi»,
«version»: «0.0.1»,
«devDependencies»: {
«grunt»: «~0.4.5»,
«grunt-contrib-compass»: «~0.8.0»,
«grunt-contrib-uglify»: «~0.5.0»,
«grunt-contrib-imagemin»: «~0.7.1»,
«grunt-contrib-watch»: «~0.6.1»,
«grunt-autoprefixer»: «~0.7.5»,
«grunt-browser-sync»: «~0.9.1»,
«grunt-newer»: «~0.7.0»
}
}

Y el fichero Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),

watch: {

scss: {
files: ‘_/components/scss/**/*.scss’,
tasks: [‘compass’,’autoprefixer’] },//scss

scripts: {
files: [‘_/components/js/*.js’],
tasks: [‘uglify’],
options: {
spawn: false,
}
},//scripts

images: {
files: [‘_/components/img/*.{png,jpg,gif}’],
// only minify new images
tasks: [‘newer:imagemin’],
options: {
spawn: false,
}
}//images

},// watch

uglify: {
my_target: {
files: {
‘_/js/scripts.min.js’: [‘_/components/js/vendor/*.js’,’_/components/js/scripts.js’] }
}//my_target

},//uglify

compass: {
dist: {
options: {
config: ‘config.rb’,
sourcemap: true
}
}//dist

},//compass

imagemin: {

main: {
files: [{
expand: true,
cwd: ‘_/components/img/’,
src: [‘**/*.{png,jpg,gif,svg}’],
dest: ‘_/img/’
}] }

},//imagemin

autoprefixer: {
options:{
browsers: [‘last 2 version’,’ie 9′] },
single_file: {
src: ‘_/css/style.css’
}

}, //autoprefixer

browserSync: {
dev: {
bsFiles: {
src : [
‘_/css/*.css’,
‘_/img/**/*.jpg’,
‘_/img/**/*.png’,
‘_/img/**/*.svg’,
‘_/js/**/*.js’,
‘**/*.php’,
‘**/*.html’
] },
options: {
watchTask: true,
debugInfo: true,
logConnections: true,
notify: true,
proxy: «framework.dev:8888»,
ghostMode: {
scroll: true,
links: true,
forms: true
}

}
}
} // browserSync

});

grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-compass’);
grunt.loadNpmTasks(‘grunt-contrib-imagemin’);
grunt.loadNpmTasks(‘grunt-newer’);
grunt.loadNpmTasks(‘grunt-autoprefixer’);
grunt.loadNpmTasks(‘grunt-browser-sync’);

grunt.registerTask(‘default’, [«browserSync», «watch»]);

};

Espero que os sirva Grunt para ahorra tiempo en tareas tediosas como mejorar JS, CSS e imágenes. Además Grunt mejora el WPO u el SEO de tu web, lo que al final redunda en una carga más rápida para los usuarios y un menor gasto de ancho de banda.

Fuentes para comenzar con Grunt: http://gruntjs.com/sample-gruntfile

. Leer artículo completo en Frikipandi Grunt mejora el WPO y el SEO de tu web.