Escael Marrero

Blog \\ Gulp

Automatizar tareas frontend

Automatizar tareas de frontend es uno de los procesos que se han ido imponiendo en la actualidad en todo desarrollo web. El mismo posibilita que se gestionen procesos tan diversos como compilado de Sass o Less, minificación y concatenación de CSS y JS, comprimir imágenes, verificar errores y multitud de tareas más. Desde que comencé a investigar este apartado del desarrollo web no concibo comenzar un proyecto que no sea siguiendo estos pasos.

Existe multitud de documentación al respecto, en este post he querido resumir los pasos que sigo normalmente. Aprovecho que tengo que instalar una máquina virtual nueva y relato lo que voy haciendo y así me sirve de guía para futuros proyectos y a vosotros os puede servir. Porque si habéis indagado un poco sobre el tema, cada quien hace esto como le viene en gana y la documentación cambia de un sitio a otro. Resumiendo pongo la que a mi me ha funcionado, para sumar un poco de caos a este mundo de muy señor mio, como dicen por ahí.

Nota: Esta documentación esta orientada a Ubuntu. Aunque es perfectamente aplicable a cualquier sistema.

1- Sino lo tienes ya, instala Git como controlador de versiones:

Ahora vamos a instalar Gulpjs para gestionar las tareas de nuestro despliegue de estáticos. Pero antes necesitamos npm como paquete de NodeJs, y tener instalado NodeJs:

  • sudo apt-get update
  • sudo apt-get install nodejs

Hasta aquí tenemos instalado NodeJs. Ahora instalamos npm:

  • sudo apt-get install npm

A continuación viene un proceso que no acabo de entender bien  pero que consiste en dar permisos al usuario para que pueda instalar y ejecutar npm sin ser root (los paquetes de NodeJs se instalan a nivel global o a nivel local). De no ser así tendríamos que instalar todos los paquetes de npm como root y esto no esta recomendado, además de ser un coñazo el ir introduciendo contraseña cada vez que queramos hacer algo. Por lo tanto, poner como propietario al usuario a todas los paquetes de npm.

  • sudo chown -R nombredeusuario ~/.npm
  • sudo chown -R nombredeusuario /usr/local/lib/node_modules

Esta línea no la tengo muy clara, pero basicamente ejecuta npm a nivel local:

  • npm config set prefix ‘~/.npm-packages’

Ahora, si he entendido bien, esta configuración vuelve a su punto de origen una vez que se reinicia la sección de usuario. Sería molesto tener que correr dicho comando cada vez que iniciemos la sección. Para ello editamos el fichero .bashrc y agregamos lo siguiente:

  • export PATH=”$PATH:$HOME/.npm-packages/bin”

Por último creamos un enlace simbólico de NodeJs a node:

  • ln -s /usr/bin/nodejs /usr/local/bin/node

(Ayuda en NPM sobre permisos: Fixing npm permissions)

En Digital Ocean tienen un tutorial bastante completo sobre el tema.

Otra de las aplicaciones que vamos a utilizar es Bower, que nos permitirá gestionar los paquetes y sus versiones. Para instalarlo seguimos con npm:

  • npm install -g bower

Una vez hecho podremos instalar Gulp a nivel global. Fijarse que no usamos sudo:

  • npm install –global gulp

Verificamos que Gulp.js ha sido instalado correctamente.

  • gulp -v

Si esta correcto saldrá algo así:

  • CLI version 3.9.0

Ahora vamos a instalar Gulp en un proyecto local. Creamos una carpeta que será la que contendrá nuestro proyecto. Dentro de la misma creamos un fichero:

  • gulpfile.js

A continuación tecleamos la instrucción:

  • npm init

que nos pedirá los datos de nuestro proyecto y lo vamos rellenando según nuestra información.

Para instalar gulp en el proyecto local:

  • npm install –save-dev gulp

Aquí ya estaríamos listos para instalar los paquetes de gulp que vamos a utilizar. Voy a documentar las de uso común y pondré el fichero gulpfile.js con ejemplos de su implementación. Los mismos se pueden hallar aquí: https://www.npmjs.com/package/package

Estos son los que vamos a instalar:

Todos estos paquetes se instalarán en local. Las instrucciones son las mismas, solo cambia el nombre:

  • npm install gulp-sass –save-dev
  • npm install gulp-concat –save-dev
  • npm install –save-dev gulp-uglify

Cuando hayamos instalado estos paquetes ya podemos abrir el gulfile.js y crear nuestras primeras tareas:

var gulp 		= require('gulp');
var sass 		= require('gulp-sass');
var concat 		= require('gulp-concat');
var uglify 		= require('gulp-uglify');

gulp.task('sass', function () {
	gulp.src('sass/**/*.{scss,sass}')
	.pipe(sass({
		errLogToConsole: true
	}))
	.pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
	gulp.watch('sass/**/*.{scss,sass}', ['sass'])
});

gulp.task('default', ['sass', 'watch']);

Como podemos observar la configuración de tareas es muy sencilla. Primero incluimos los paquetes que vamos a necesitar. Después creamos la tarea con gulp.task y al final la lanzamos con el comando gulp en terminal. sino le pasamos ningún parámetro el va a llamar a la task “default”.

Y eso sería todo. Espero que este mini tutorial os pueda servir para algo. Por mi parte ya tengo todos los pasos que necesito en un solo lugar 🙂 Si veo que falta algo útil lo iré incluyendo, o si alguno por ahí necesita que amplíe no dudéis en dejar un comentario.

Gulp \\ , , \\ No hay comentarios

Dejar un comentario

  • Los campos marcados con * son obligatorios