Compilando SASS en Visual Studio con GULP y automatizando tareas

Hasta ahora en Visual Studio disponíamos de una herramienta que nos hacía prácticamente todo el trabajo «engorroso» a la hora de trabajar en el frontend de una aplicación, Web Essentials, pero en la versión para Visual Studio 2015 han anunciado que no incluirían la característica que más uso yo hoy en día de esta herramienta y no es otra que el compilador de SASS
así que, nos va a tocar hacerlo a mano haciendo uso de
Gulp o Grunt.

No trataré la diferencia entre ambos en este artículo, así que iré directamente al ejemplo que quiero mostrar, compilar SASS con Gulp dentro de Visual Studio 2015.

Preparar la solución

Lo primero será instalar las herramientas necesarias en nuestro entorno:

• Node: Viene integrado con Visual Studio 2015 si lo hemos seleccionado durante la instalación, en caso contrario podéis descargar el instalador desde este enlace
• Gulp: También viene integrado si lo hemos seleccionado, en caso contrario:
  • npm install gulp -g
    
  • npm install gulp-sass –g
    

La opción –g indica que se instale globalmente para poder usar los paquetes desde cualquier lugar.

• Cread un fichero package.json en la raíz del proyecto y añadid las siguientes líneas.

{

    "name": "Project Name",

    "version": "1.0.0",

    "description": "Project Description",

    "devDependencies": {

        "gulp": "3.8.11",

        "gulp-sass": "1.3.2"

    }

}

Si estáis usando la plantilla de Sitio Web de ASP.NET 5 (vNext) ya tendréis ese archivo.

No olvidéis comprobar que la versión de los paquetes Gulp se corresponde con la que tenéis instalada.

Creando las tareas Gulp

Una vez tenemos el entorno preparado, ya podemos comenzar a ejecutar tareas de Gulp. Para ello, creamos el fichero gulpfile.js con el siguiente código

var gulp = require('gulp');

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

gulp.task('sass-compiler, function () {

    gulp.src('/css/*.scss')

        .pipe(sass())

        .pipe(gulp.dest('/css/dist'));

});

gulp.task('sass-watcher', function () {

    gulp.watch('./css/*.scss', ['sass-compiler]);

});

• Con esto estamos creando las variables Gulp y Sass necesarias para hacer referencia a las librerías, requeridas.
• Creamos una tarea Gulp, que llamamos «sass-compiler» en la que especificamos que compile los ficheros sass en la carpeta «css» y que ubique el resultado en la carpeta «css/dist».
• Por último, tenemos otra tarea Gulp «sass-watcher» que queremos que esté a la espera de cualquier cambio en ficheros «scss» y que cuando se produzca alguno los compile todos. ¿Por qué todos? Pues porque el que estamos modificando puedes ser por ejemplo un fichero con las variables correspondientes a la paleta de colores del sitio web y el resto de ficheros sea dependiente.

   

Ejecutando las tareas

Llegados a este punto, ya estamos en disposición de poder compilar nuestras hojas de estilo hechas con Sass, así que abrimos el explorador de tareas «Task Runner Explorer» que trae Visual Studio y podremos ver un árbol con nuestro fichero gulpfile.js y las tareas que contiene.

Si ejecutamos la tarea «sass-compiler» (doble click o botón derecho -> Run), podremos comprobar cómo se nos crea una carpeta «dist» dentro de «css» y se despliega el fichero «.css» resultante de la compilación en caso de que haya sido exitosa claro está.

Al ejecutar la tarea «sass-watcher», se estará a la espera de que haya un cambio en algún fichero y, automáticamente se ejecutará el código que contiene y que hace una llamada a la tarea «sass-compiler».

Automatizando la ejecución de las tareas

Si queremos automatizar el momento del lanzamiento de las tareas, podemos establecer «bindings» con 4 eventos de Visual Studio:

• Before Build
• After Build
• Clean
• Solution Open

Para ello, con el botón derecho del ratón hacemos click en el nombre de la tarea desde el «Task Runner Explorer» y desplegamos la opción Bindings para seleccionar la que se adapte a nuestras necesidades, como por ejemplo, que se compilen los ficheros Sass antes de la construcción de la solución y que el «watcher» esté activo al abrir la solución. De esta forma, no tendremos que preocuparnos más por lanzar las tareas puesto que será Visual Studio el que se encargue de hacerlo por nosotros cuando ocurran estos eventos.

¿Necesitas más sobre Gulp?

Con Gulp por ejemplo podemos minificar (minimizar) nuestros ficheros Sass, scripts, etc y realizar otras tareas que podrían resultar interesantes que podréis encontrar en su documentación

Enjoy coding! 🙂