Grunt: Cómo automatizar el watch de SASS y activar Livereload

Septiembre 04, 2014

omers

Infraestructura y Backend

Regresando por acá después de una larga ausencia :P, es hora de compartirles un poco mas de estas herramientas sexy’s de hoy en día. Como hemos visto en post anteriores, enzo nos a mostrado mostrado en algunas de las entradas tales como Introducción a Grunt y Como automatizar la minificación de archivos CSS y JS con Grunt, algunas de las características de este poderoso Task Runner, en esta ocasión les compartiré como configurar unas de las características más interesantes que nos aporta esta herramienta como lo son watch de SASS y livereload.

Instalar grunt plugins

Primero, antes que nada debemos de instalar los plugins que nos aportaran esta característica, para lo cual es importante hacer algo de historia, anteriormente el plugin de livereload era conocido como grunt-contrib-reload pero a partir de octubre de 2013 se decidió integrarlo en el plugin de grunt-contrib-watch, el cual nosotros instalaremos, teniendo en cuenta que ya tenemos npm instalado.

$ npm install grunt-contrib-watch --save-dev

Esto deberá agregar la dependencia a nuestro archivo package.json.

"grunt-contrib-watch": "~0.4.4",

Agregar la tareas a grunt

En esta parte debemos de poner mucha atención a lo que va a suceder, puesto que necesitamos darle a la tarea watch la orden que ejecute las tareas que vimos en la entrada de blog pasada y ademas dispare el livereload:

Arrancar nuestro servidor local con grunt una ve ejecutado el comando grunt server.
Actualizar y minificar los archivos JS cuando detecte un cambio en nuestros archivos JS (uglifyy concat’concat’, ‘uglify’

).
Recompliar nuestros archivos sass cuando se detecte un cambio así como lo hace el comando compass watch (compass).
Hacer el reload de la pagina para visualizar los cambios.

Vamos a hacer la configuración de conexión de nuestro livereload.

connect: {
    options: {
        port: 9001,
        livereload:35729,
        hostname: 'localhost'
    },
    livereload: {
        options: {
            open: true,
            base: [
                '.tmp',
                yeomanConfig.app
            ]
        }
    },
},

Como podemos ver en los siguientes parámetros, configuramos las opciones de nuestro servidor local, incluyendo el puerto donde trabajara el livereload y el docroot de nuestro proyecto.

Ahora debemos de indicarle a nuestra tarea de watch las configuraciones del livereload y los formatos de archivos donde queremos que lo dispare cuando detecte un cambio, previo a eso en el watch también indicamos que tiene que hacer con cada cambio de una archivo .scss y .js (mandando a llamar a su respectiva tarea como compass, concat y uglify).

watch: {
    scripts: {
        files: [
            yeomanConfig.app + '/js/*.js',
            yeomanConfig.app + '/scripts/*.js',
            yeomanConfig.app + '/scripts/*/*.js'
        ],
        tasks: ['concat', 'uglify'],
        options: {
            spawn: false,
            livereload:true
        },
    },
    css: {
        files: [yeomanConfig.app + '/styles/sass/*.scss'],
        tasks: ['compass'],
        options: {
            spawn: false,
            livereload: true
        }
    },
    all: {
        files: 'index.html',
        options: {
            livereload: true
        }
    },
    livereload: {
        options: {
            livereload: '<%= connect.options.livereload %>'
        },
        files: [
            yeomanConfig.app + '/{,*/}*.html',
            '.tmp/styles/{,*/}*.css',
            yeomanConfig.app + '/images/{,*/}*'
        ]
    }
},

Como podemos observar en las configuraciones “scripts” y “css”, si detectamos cambios ya sea en los archivos .js o .css mandara a llamar las tareas de compass, concat y uglify respectivamente y después activamos el parámetro livereload, y así, cuando se procesen estos cambios se refresque la pagina.

Configurar comando grunt

Una vez configurado nuestro livereload y nuestro watch es momento de dar de alta las tareas que se usaran y el comando “grunt server” para poderlo ver en acción.

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

grunt.registerTask('server', ['connect:livereload','watch']);

Con esto es suficiente para poder ejecutar desde nuestra linea de comandos y poder apreciar la magia de grunt.

$ grunt server

Ahora cada vez que cambiemos algún estilo o comportamiento en nuestro código se actualizara y con ello se refrescara la pagina de forma automática, el código completo quedaría de la siguiente forma:

Ejecutar la tarea.

'use strict';

module.exports = function (grunt) {

    // configurable paths
    var yeomanConfig = {
        app: 'web',
        dist: 'dist'
      };

    grunt.initConfig({
        yeoman: yeomanConfig,
        concat: {
            dist: {
                src: [
                    yeomanConfig.app + '/vendor/bootstrap-sass/dist/js/bootstrap.js', // Bootstrap JS
                    yeomanConfig.app + '/js/*.js', // All JS in the libs folder
                    yeomanConfig.app + '/js/global.js'  // This specific file
                ],
                dest: yeomanConfig.app + '/js/dist/production.js',
            }
        },
        uglify: {
            build: {
                src: yeomanConfig.app + '/js/dist/production.js',
                dest: yeomanConfig.app + '/js/dist/production.min.js'
            }
        },
        compass: {
            dist: {
                options: {
                    sassDir: yeomanConfig.app + '/styles/sass',
                    cssDir: yeomanConfig.app + '/styles',
                    importPath: yeomanConfig.app + '/vendor',
                    imagesDir: yeomanConfig.app + '/images',
                    javascriptsDir: yeomanConfig.app + '/scripts',
                    fontsDir: yeomanConfig.app + '/styles/fonts',
                }
            },
        },
        watch: {
            scripts: {
                files: [
                    yeomanConfig.app + '/js/*.js',
                    yeomanConfig.app + '/scripts/*.js',
                    yeomanConfig.app + '/scripts/*/*.js'
                ],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false,
                    livereload:true
                },
            },
            css: {
                files: [yeomanConfig.app + '/styles/sass/*.scss'],
                tasks: ['compass'],
                options: {
                    spawn: false,
                    livereload: true
                }
            },
            all: {
                files: 'index.html',
                options: {
                    livereload: true
                }
            },
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    yeomanConfig.app + '/{,*/}*.html',
                    '.tmp/styles/{,*/}*.css',
                    yeomanConfig.app + '/images/{,*/}*'
                ]
            }
        },
        connect: {
            options: {
                port: 9001,
                livereload:35729,
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    open: true,
                    base: [
                        '.tmp',
                        yeomanConfig.app
                    ]
                }
            },
        },
    });

    // Where we tell Grunt we plan to use some plug-ins.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    // Where we tell w.	
    grunt.registerTask('server', ['connect:livereload','watch']);

};

Y así queridos lectores es como podemos aprovechar esta genial característica de Grunt y olvidarnos de configurar un host virtual para poder trabajar la parte de front-end, y agilizar nuestro proceso de desarrollo.

Si estas interesado en ver su funcionamiento en un proyecto real, te invitó a que te des una vuelta por el proyecto de Comunnity Bookstore, las contribuciones son bienvenidas!!!!!, espero que esto les sea de utilidad y de su agrado.

Como automatizar la minificación de archivos CSS y JS con Grunt - See more at: http://7sabores.com/blog/automatizar-la-minificacion-archivos-css-js-grunt#sthash.046XKs2v.dpuf