.NET Core2.0 bundleconfig.json ne fonctionne pas

Je ne parviens pas à faire du bundle pour travailler dans une application Web Core 2.0. J’ai le texte suivant dans mon fichier bundleconfig.json :

[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/css/bootstrap.min.css", "inputFiles": [ "wwwroot/lib/bootstrap/dist/css/bootstrap.css", ] }, { "outputFileName": "wwwroot/css/jquery-datatables.min.css", "inputFiles": [ "wwwroot/lib/jquery/jquery-datatables/datatables.css", "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false }, { "outputFileName": "wwwroot/js/jquery.min.js", "inputFiles": [ "wwwroot/lib/jquery/dist/jquery.js", ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false }, { "outputFileName": "wwwroot/js/bootstrap.min.js", "inputFiles": [ "wwwroot/lib/bootstrap/dist/js/bootstrap.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false }, { "outputFileName": "wwwroot/js/jquery-datatables.min.js", "inputFiles": [ "wwwroot/lib/jquery/jquery-datatables/datatables.js", "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/js/dataTables.responsive.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false } ] 

J’ai installé le package BuildBundlerMinifier NugGet. Lorsque je construis le projet, le fichier bundleconfig.json est en cours de traitement.
J’ai ajouté ce qui suit à _Layout.cshtml :

                 @RenderSection("Scripts", required: true)  

Lorsque je lance l’application, les ressources ne sont pas chargées. Je reçois les erreurs suivantes:

Échec du chargement pour le avec la source « https: // localhost: 44301 / wwwroot / js / site.min.js ».
Le chargement a échoué pour le avec la source “ https: // localhost: 44301 / wwwroot / js / jquery.min.js ”.
Le chargement a échoué pour le avec la source « https: // localhost: 44301 / wwwroot / js / bootstrap.min.js ».
Échec du chargement pour le avec la source « https: // localhost: 44301 / wwwroot / js / jquery-datatables.min.js »

Quelqu’un peut-il m’aider s’il vous plaît?

Vous devez supprimer la partie “wwwroot” dans les URL. “wwwroot” est le dossier racine où votre application est en cours d’exécution. Maintenant, il va chercher les fichiers dans “… wwwroot / wwwroot / js …” au lieu de “… wwwroot / js …” .

Je ne pouvais pas que cela fonctionne et j’ai appris qu’il y avait plus que le problème à l’heure actuelle.

Par défaut, aucun des éléments de regroupement et de minification n’est installé dans un projet de pages de razor Core Dotnet.

Soi-disant, vous pouvez vérifier vos parameters en cliquant avec le bouton droit de la souris sur bundleconfig.json dans Visual Studio Solution Explorer. Mais cela ne montre rien dans mon projet.

J’ai enfin trouvé un complément Visual Studio .

Bundler & Minifier – manuel

Au lieu de cela, j’ai installé un bundler & minifier manuel – qui est écrit par le même auteur (Mads Kristensen) que le paquet Nuget d’en haut. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

C’est une extension de Visual Studio et après l’avoir installée, vous pouvez cliquer avec le bouton droit de la souris sur n’importe quel fichier css ou js et vous obtiendrez un menu qui vous permettra de les réduire “manuellement”. fichier bundle

Activer le bundle sur la construction …

Cette option vous avertira qu’elle va installer un paquet Nuget. Je ne l’ai pas encore fait.

J’ai également décoché l’option [Produire les fichiers de sortie], puis sélectionné à nouveau (cochée) et, ce faisant, un autre fichier a été créé dans ma solution sous le fichier bundleconfig.json nommé bundleconfig.json.bindings . Ce fichier contient une seule ligne:

 produceoutput=true 

C’est étrange que ce n’était pas là auparavant. Je sais que ce fichier n’existait pas auparavant, car git m’a dit qu’il existe des fichiers non suivis et qu’il a mentionné ce fichier.

Pour vérifier s’il ya un problème en studio ou quelque chose du genre, j’ai créé un tout nouveau projet Dotnet Core 2.x Razor Pages, puis j’ai immédiatement supprimé le fichier min.css et essayé de le reconstruire sans le reconstruire.

Mettre à jour tous les bundles que j’ai construits à nouveau après l’ajout du fichier .bindings, mais les bundles n’étaient toujours pas construits. J’ai alors remarqué que j’avais une autre option dans le menu [Construire], mais je ne suis pas sûr qu’il s’agisse du plug-in Bundling & Minifying que j’ai installé. Vous devrez donc en tenir compte lorsque vous recherchez cette solution.

mettre à jour tous les paquets

Vous pouvez également vérifier vos parameters dans le menu [Outils … Options …] de Visual Studio:

Outils et options Vous pouvez voir que l’option Bundler & Minifier a la valeur true pour les fichiers de sortie du produit dans mon projet (même s’il ne fonctionne toujours pas).

En fait, j’ai lu cette phrase du bas un peu plus près et j’ai remarqué qu’elle disait: “écoute activement les modifications de fichier d’entrée”, alors j’ai changé mon site.css et j’ai remarqué que la valeur avait bien été mise à jour dans le site.css.

Faire un changement, le changer en arrière

La chose étrange est quand / si vous supprimez votre site.min.css alors il ne semble pas être régénéré à tout moment. J’imagine que maintenant, si vous faites cela, vous pouvez apporter un changement et le modifier à nouveau et le fichier min sera créé.

J’ai testé cela: supprimé site.min.css puis apporté une modification et le fichier était à nouveau généré. C’est juste étrange que la construction ne déclenche pas cette fonctionnalité.

Le problème n’utilise pas wwwroot dans votre chemin. Le problème est que vous utilisez la notation ~ avant wwwroot, ce qui indique au navigateur d’utiliser le chemin racine (wwwroot) et ce qui suit votre chemin, qui est également wwwroot.

Vous pouvez utiliser le chemin absolu

 "inputFiles": [ "wwwroot/css/site.css" ] 

Ou le chemin relatif

  "inputFiles": "~/css/site.css" ] 

Les deux ne sont pas trop en même temps, car le chemin relatif complète le chemin complet avec la notation ~ ou ../ .

Une autre observation sur vos scripts. Pourquoi diable gardez-vous les fichiers séparés? L’objective du paquet est que vous n’avez pas à inclure chaque fichier séparé. Il les combine dans un fichier réduit et demande moins au serveur de charger les pages. Ne gardez pas les scripts datatables séparés de vos scripts.

Au lieu de:

 { "outputFileName": "wwwroot/css/bootstrap.min.css", "inputFiles": [ "wwwroot/lib/bootstrap/dist/css/bootstrap.css", ] }, { "outputFileName": "wwwroot/css/jquery-datatables.min.css", "inputFiles": [ "wwwroot/lib/jquery/jquery-datatables/datatables.css", "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css" ] }, 

Votre devrait mettre:

 { "outputFileName": "wwwroot/css/myStyles.css", "inputFiles": [ "wwwroot/lib/bootstrap/dist/css/bootstrap.css", "wwwroot/lib/jquery/jquery-datatables/datatables.css", "wwwroot/lib/jquery/jquery-datatables/Responsive-2.2.1/css/responsive.dataTables.css" ] } 

Selon la documentation de Microsoft ici.

Le package BuildBundlerMinifier NuGet permet d’exécuter un regroupement et une minification au moment de la construction.

Au début, cela me gênait aussi, car il n’est pas installé par défaut et l’implication de la machine semble bien vouloir fonctionner en mode intégré. Mais ce n’est pas le cas.