Utiliser bundleconfig.json avec Visual Studio


Lorsque l’on créé aujourd’hui un nouveau projet sur Visual Studio 2017 en passant par le template DotNet Core MVC, on se retrouve avec un projet tout beau tout neuf et prêt à l’emploi… ou presque…image

En effet, les développeurs ont oublié un petit détail dans ce template, qui nous empêche de faire marcher les bundles et la minification lors du build Sad smile 

Pour reproduire ce souci, nous allons donc y aller étape par étape et je vais vous montrer comment corriger ce petit souci , avec en bonus la procédure à suivre pour utiliser la minification en ligne de commande (pour l’intégrer à des tâches autre que la build) Smile 


Commencez par créer un nouveau project DotNet Core avec le template MVC :

image


Nous allons nous retrouver avec un projet prêt à l’emploi pour faire nos devs .

Dans la liste des fichiers, nous remarquons le fichier “bundleconfig.json” qui est présent : il est utilisé dans le template pour minifier les fichiers “js” et “css” du site.

Sauf que, comme je vous le disais, ça ne marche pas… Pour tester cela, nous allons supprimer le fichier minifié du site.js :


image


Ensuite, il faut builder notre solution pour voir s’il est généré de nouveau :

image


Surprise … aucune action de minification n’a été effectuée, et si l’on regarde dans notre explorateur de fichiers , aucun fichier min.js n’a été généré.

-> Autrement dit, le template MVC de base n’est pas opérationnel sur cette partie là.


Voici comment faire pour rajouter ce qui manque au projet et faire marcher cette partie-là :


Cliquez sur “Manage Nuget package”

image

Vous l’aurez compris, il manque un paquet nuget pour faire marcher la minification ! Et étant donné que le fichier “bundleconfig.json” est utilisé par le paquet Nuget “BundlerMinifier”, et qu’il n’est pas référencé par défaut dans le template, c’est comme si le fichier ne servait à rien…

Dans la prochaine version du template, Microsoft va retirer ce fichier du template pour éviter cette confusion (cf: https://github.com/aspnet/templating/issues/326)

Il est donc nécessaire d’installer la version de ce Paquet Nuget :


image

Puis essayez simplement de rebuilder la solution Smile 

Normalement, cette fois-ci, tout devrait marcher et vous allez retrouver dans votre dossier js , la fameuse version minifiée Smile

Utiliser BundlerMinifier en ligne de commande

Vous allez avoir besoin d’un autre paquet nuget pour cela, donc rendez vous dans votre bibliothèque de paquet nuget et récupérez : “BundlerMinifier.Core”

Ce paquet vous permettra d’utiliser l’outil par ligne de commande, en faisant par exemple un “dotnet bundle” pour exécuter les taches du fichier bundleconfig.json. Pratique !


image


Une fois installé, on va s’empresser d’essayer la ligne de commande sur notre projet…

image

On a là une belle erreur… “Aucun exécutable ne correspond à la commande “dotnet-bundle”.

Explication :

Encore une fois, les choses ne se déroulent pas comme prévues : lors de l’installation de notre package une erreur s’est glissée dans le fichier csproj du projet.


<PackageReference Include="BundlerMinifier.Core" Version="2.6.362" />


Nous voyons qu’il a été référencé comme étant un package alors qu’il est censé être un “tools”. Il faudra alors déplacer cette ligne pour la transformer en “DotNetCliToolReference”, comme ci-dessous:


image


Réessayons maintenant notre ligne de commande !


image

Cette fois-ci tout se déroule parfaitement !


Voilà, vous avez tout pour avoir un environnement clean et qui marche pour bundler et minifier vos fichiers Smile

Ce travail effectué par Joel Pinto Ribeiro est mis à disposition selon les termes de la licence Creative Commons Paternité-Partage des Conditions Initiales à l’Identique 3.0 France. Basé sur un travail de joelpintoribeiro.com.


Joel
Joel Pinto Ribeiro
Développeur passionné