Grunt permet d’automatiser des tâches répétitives telles que la minification de fichiers JavaScript ou CSS, le lancement de tests, etc. Bonne nouvelle : Grunt est parfaitement intégré à Visual Studio 2015, il est donc temps de s’y mettre. Dans cet article nous allons voir comment automatiser le processus de génération d’un fichier CSS minifié à partir d’un fichier SASS :

Le but est également de générer un fichier source map basé sur le fichier source SASS afin de simplifier le debug :

Nous allons avoir besoin des packages Nodejs suivants :

• grunt-sass : compile les fichiers SASS
• grunt-autoprefixer : ajoute les préfixes spécifiques aux nagivateurs (-moz-, –webkit, etc. )
• grunt-csswring : minifie les fichiers CSS et génère un fichier sourcemap

Pour cela il suffit de les déclarer dans le fichier packages. json situé à la racine du projet :

{     
   "version": "1.0.0",     
   "name": "Sample",     
   "private": true,     
   "devDependencies": {     
   "grunt": "^0.4.5",     
   "grunt-sass": "^0.17.0",     
   "grunt-autoprefixer": "^2.1.0",     
   "grunt-csswring": "^1.1.0",     
   "grunt-contrib-watch": "^0.6.1"     
   }     
}

N’oubliez pas de télécharger les nouveaux modules :

Maintenant nous pouvons utiliser ces modules dans le fichier grunt. js:

module.exports = function (grunt) {     
   grunt.initConfig({});     
   grunt.loadNpmTasks("grunt-sass");     
   grunt.loadNpmTasks("grunt-autoprefixer");     
   grunt.loadNpmTasks("grunt-csswring");     
};

Nous pouvons maintenant configurer nos trois tâches :

grunt.initConfig({     
   sass: {     
   sample: {     
   options: {     
   style: "expanded",     
   sourceMap: true,     
   verbose: true     
   },     
   files: {     
   'wwwroot/css/site.css': "wwwroot/css/site.scss"     
   }     
   }     
   },     
   autoprefixer: {     
   sample: {     
   options: {     
   browsers: ["last 2 versions"],     
   diff: false,     
   map: true     
   },     
   files: {     
   'wwwroot/css/site.prefixed.css': "wwwroot/css/site.css"     
   }     
   }     
   },     
   csswring: {     
   sample: {     
   options: {     
   map: true     
   },     
   files: {     
   'wwwroot/css/site.prefixed.min.css': ["wwwroot/css/site.prefixed.css"]     
   }     
   }     
   }     
});

Afin de faciliter l’utilisation de ces trois tâches il est recommandé de créer un alias :

grunt.registerTask("style", ["sass", "autoprefixer", "csswring"]);

Pour lancer une tâche Grunt depuis Visual Studio, on utilise le Task Runner Explorer :

Le résultat s’affiche dans la console. Ici tout est bon :) On se retrouve donc avec les fichiers suivants :

On peut maintenant automatiser le lancement de cette tâche soit en utilisant grunt watch, soit en créant un binding dans Visual Studio :

Pour ce type de tâche je préfère tout de même utiliser grunt watch (binder au démarrage du projet) car cela évite de recompiler le projet complet à chaque modification du style :

grunt.initConfig({     
   watch: {     
   styles: {     
   files: ["wwwroot/**/*.scss"],     
   tasks: ["styles"]     
   }     
   },

Et voilà, tout le processus de génération des fichiers css est automatisé. A chaque modification du fichier SASS, chaque tâche se lance automatiquement les unes après les autres afin de produire un fichier css préfixé et minifié (et le tout avec un sourcemap pour simplifier le debug).