Cómo utilizar Grunt

Kirjoitettu - Viimeisin muokkaus

A lo largo del desarrollo de una aplicación siempre hay una serie de tareas que realizamos constantemente, ya sea al inicio del proyecto (crear una plantilla predeterminada con backbone) o durante su desarrollo o despliegue en producción (minimizar hojas de estilo, comprimir imágenes...). Para esto, hay una serie de herramientas que nos permiten automatizar dichas tareas. En esta ocasión vamos a hablar de Grunt, un automatizador de tareas para nodejs. Esta herramienta permite con un solo comando ejecutar todas las tareas introducidas en el llamado Gruntfile. Básicamente la estructura de este fichero es un json en el que decimos qué tareas queremos ejecutar y con qué parámetros. Grunt ya proporciona una serie de plugins que realizan una serie de tareas determinadas. Debemos indicar en el package.json de nuestra aplicación qué plugins necesitamos para que se instalen en nuestra aplicación y en el Gruntfile indicaremos qué plugins queremos cargar.
Empecemos con la guía:

Paso I Instalación de grunt

Una de las formas de instalar grunt es introducirlo en nuestro package.json, de la siguiente manera:
package json- grunt
Este es un package.json de una aplicación express. Al indicar el * le decimos que instale la última versión. Una vez guardado el package.json, instalamos las dependencias con npm install.

Paso II Instalación de los plugins de Grunt.

Según las tareas que nosotros ejecutemos con normalidad, instalaremos unos plugins u otros. Podemos ver los plugins disponibles en http://gruntjs.com/plugins. En esta guía usaremos los plugins necesarios para automatizar las tareas de minimización de javascripts y complicación de stylus en css. Los plugins necesarios son grunt-contrib-stylus (compilación de css) y grunt-contrib-uglify (minimización de js). Modificamos nuevamente nuestro package.json y añadimos dichas dependencias, quedando como sigue:
package.json-plugins grunt
Una vez modificamos ejecutamos de nuevo npm install.

Paso III Preparación del Gruntfile.

Como he comentado, vamos a automatizar el minimizar los javascripts y el generar los css a partir de los stylus. El Gruntfile es un fichero con formato JSON, en el que le decimos las tareas que vamos a ejecutar y con qué parámetros. Podremos crear tareas propias o usar las que nos facilitan los plugins de Grunt. Creamos un fichero llamado Gruntfile.js, que tendrá la siguiente estructura: estructura de grunt file Básicamente, es un json en el que cargamos tareas y las registramos, indicando qué parámetros queremos que tenga cada una. En el entorno que tengo montado, los javascripts fuente los tengo en public/javascripts/dev, y quiero que me genere los javascripts minimizados en el edirectorio public/javascripts/, con la extensión .min.js. Es necesario indicarle al uglify cuál es el directorio de trabajo (public/javacripts/dev/) con cwd para que busque ahi los ficheros fuente, que indicaremos cuáles son con el atributo src. Del mismo modo le diremos cuál es nuestro directorio destino con dest y la extensión con ext. Esto me llevó al principio muchos quebraderos de cabeza, pues no usaba el atributo cwd y le indicaba el directorio fuente directamente en el atributo src, lo que hacía que uglify me generara los archivos en public/javascripts/dev/public/javascripts/ ¡No olvidar poner el atributo cwd! Para compilar los stylus, haremos algo parecido. Para los css queremos que al compilar los stylus con directivas @import, incluyan en el fichero generado el código de los ficheros que se importan. No voy a comentar nada más acerca de la configuración porque creo que queda muy claro en los comentarios que adjunto en el Gruntfile, que quedaría así: grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //incluye en el fichero generado un comentario cabecera }, build: { files: [{ //al introducir un array como parámetro estamos diciendo que compile varios ficheros expand:true, //así decimos que nos genere un fichero por cada fichero compilado. De otro modo nos generaría un solo fichero js. cwd: 'public/javascripts/dev/', //le indicamos el directorio de trabajo para los archivos fuente src: '**/*.js', //le indicamos cuáles son los archivos fuente dest: 'public/javascripts/', //le indicamos dónde queremos que genere los archivos compilados ext: '.min.js' //le indicamos la extension de los ficheros generados }] } }, stylus: { compile: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', //incluye en el fichero generado un comentario cabecera paths: ['public/stylesheets'], //busca en estos directorios para las directivas @import 'include css': true //indica que queremos incluir el CSS de una directiva @import en el mismo fichero generado al compilar }, files: { 'public/stylesheets/app.min.css': 'public/stylesheets/index.styl' //aquí le estamos diciendo que compile index.styl en app.min.css. //podríamos hacer una correspondencia de varios .styl en un unico css minimizado. Por ejemplo: //'public/stylesheets/app.min.css': ['public/stylesheets/foo1.styl','public/stylesheets/foo2.styl'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-stylus'); grunt.registerTask('compile', ['stylus','uglify']); // Default task(s). grunt.registerTask('default', [ 'compile']); }; Como véis al final del Gruntfile, tenemos 2 tareas: default y compile. Default tiene asociadas una tarea, mientras que compile únicamente una. Al lanzar default se lanzarán compile, que a su vez lanzará stylus y uglify. Para lanzar las tareas debemos ejecutar grunt, y si todo ha ido bien, se mostrará un "Done, without errors". Ahora bien, esto debemos hacerlo cada vez que modificamos un js o un styl. ¿No sería fetén que se lanzara de forma automática cada vez que se modifiquen? Pues para eso está el plugin grunt-contrib-watch, en el que le decimos que ficheros queremos monitorizar y qué tareas queremos que se lancen cuando se detecten cambios. Modificamos nuestro Gruntfile para que quede así: // Project configuration. module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! */\n' //incluye en el fichero generado un comentario cabecera }, build: { files: [{            //al introducir un array como parámetro estamos diciendo que compile varios ficheros expand:true,    //así decimos que nos genere un fichero por cada fichero compilado. De otro modo nos generaría un solo fichero js. cwd: 'public/javascripts/dev/', //le indicamos el directorio de trabajo para los archivos fuente src: '**/*.js',                    //le indicamos cuáles son los archivos fuente dest: 'public/javascripts/',    //le indicamos dónde queremos que genere los archivos compilados ext: '.min.js'    //le indicamos la extension de los ficheros generados }] } }, stylus: { compile: { options: { banner: '/*! */\n', //incluye en el fichero generado un comentario cabecera paths: ['public/stylesheets'], //busca en estos directorios para las directivas @import 'include css': true //indica que queremos incluir el css de una directiva @import en el mismo fichero generado al compilar }, files: { 'public/stylesheets/app.min.css': 'public/stylesheets/index.styl' //aquí le estamos diciendo que compile index.styl en app.min.css. //podríamos hacer una correspondencia de varios .styl en un unico css minimizado. Por ejemplo: //'public/stylesheets/app.min.css': ['public/stylesheets/foo1.styl','public/stylesheets/foo2.styl'] } } }, watch: { stylesheets: {    //opciones para observar los cambios en las hojas de estilos (compilador de stylus) files: ['public/stylesheets/**/*.styl'], //ficheros a observar tasks: ['stylus'],    //tarea a ejecutar options: { interrupt: true } }, scripts: {    //opciones para observar los cambios en los js (uglify) files: ['public/javascripts/dev/**/*.js'], tasks: ['uglify'], options: { interrupt: true } } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-stylus'); grunt.registerTask('compile', ['stylus','uglify']); grunt.registerTask('prepare', ['compile', 'watch']); // Default task(s). grunt.registerTask('default', ['prepare']); }; Y volvemos a ejecutar Grunt. Veremos que el proceso watch se queda ejecutándose y si hacemos algún cambio sobre un css o un js podremos ver cómo se generan los nuevos ficheros. Hasta aquí esta pequeña guía acerca de qué es Grunt y cómo explotarlo y que espero que con un pequeño esfuerzo al comienzo hará que ahorréis mucho tiempo a corto plazo. perfil nubelo

Seuraava artikkeli

¿Qué es el Remarketing?