Cómo inyectar CSS usando Grunt

GruntJS

Para el que es Front-end, a la hora de trabajar con estilos siempre es tedioso "cambio algo, recargamos y veo si está bien".
Con Grunt podemos usar el livereload, sin embargo solo nos ahorramos la tarea de "recargar" el navegador. Hoy veremos cómo instalar Browser Sync, que nos permitirá actualizar el navegador cuando guardemos un fichero .css o .scss.

Instalación
Para los que no conocen GruntJS, pueden visitar este tutorial sobre cómo hacerlo: Instalando GruntJS.
Para instalar Browser Sync, debemos seguir los pasos habituales de cualquier instalación:

npm install grunt-browser-sync --save-dev

Y en nuestro Gruntfile ponemos lo siguiente:

grunt.loadNpmTasks('grunt-browser-sync');

Vale aclarar que este plugin nos permite hacer más cosas que inyectar CSS: Podemos sincronizar los clicks que hagamos en un link para que hagan efecto en todos los navegadores conectados, al igual que los scrolls y submits a formularios. En este caso solo nos centraremos en los estilos, ya que el resultados es muy interesante.

Configuración
La configuración básica es la siguiente:

browser_sync: {
    files: {
        src : 'css/style.css'
    }
}

Con esto le comunicamos a Grunt que el fichero css/style.css se actualizará automáticamente en nuestro navegador cuando cambie.

Al ejecutar grunt browser_sync nos saldrán dos scripts que debemos poner en nuestro HTML, que son los siguientes:

<script src='http://192.168.1.48:3000/socket.io/socket.io.js'></script>
<script src='http://192.168.1.48:3001/browser-sync-client.min.js'></script>

La ip dependerá de nuestra conexión, a estos dos scripts debemos ponerlos antes del cierre de la etiqueta body.

Trabajar en conjunto con Watch
Browser Sync no es un reemplazo al plugin Watch, en realidad están capacitados para trabajar juntos, solo debemos configurar Browser Sync y ejecutarlo ANTES que Watch.
Pondremos un ejemplo de esto:

module.exports = function (grunt) {
    grunt.initConfig({
        watch: {
            files: "css/style.css",
            tasks: ['compass'],
        },
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    css/style.css : sass/style.scss
                }
            },
        },
        browser_sync: {
            files: {
                src : 'css/stylecss',
            },
            options: {
                watchTask: true,
            },
        },
    });

    // load npm tasks
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    // create custom task-list
    grunt.registerTask('default', ["browser_sync", "watch"]);
};

Lo que hacemos aquí es configurar SASS de la manera tradicional, y luego observar con Browser Sync los cambios que hagamos en nuestro fichero CSS, entonces primero se ejecuta SASS, luego al cambiar el CSS, Browser Sync lo detecta, y sincroniza nuestros navegadores conectados para cambiar lo que hayamos hecho sin necesidad de recargar nuestro navegador.

Conclusiones
Hay muchas cosas que debemos cambiar en nuestros hábitos, la verdad al comienzo no quería instalar este plugin pero ahora estoy totalmente seguro de que es una utilidad muy grande, y cuando nos toca trabajar con estilos, SASS, Bourbon, Compass, etc, etc, es perfecto para agilizar y mejorar nuestra productividad.