Regroupement et minification sans ASP.NET MVC

Est-il possible d’utiliser le groupement et la minification à partir de Microsoft.AspNet.Web.Optimization sans avoir un projet MVC?

Je crée un site AngularJS communiquant avec une API REST. Pour l’API REST, j’utilise l’API Web ASP.NET. J’ai également créé une “application Web vide ASP.NET”. Il n’y a que des fichiers HTML, js et CSS dans ce projet (et un fichier web.config). J’aimerais que mes fichiers js et CSS soient regroupés et minifiés, mais je ne souhaite pas créer un projet MVC uniquement pour l’obtenir. C’est possible?

Il est tout à fait possible d’utiliser le groupement et la minification dans un projet vierge.

  1. Utilisez Nuget pour installer le package: Install-Package Microsoft.AspNet.Web.Optimization
  2. Créez une classe BundleConfig et définissez vos bundles:

     using System.Web.Optimization; public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/js").Include( "~/Scripts/*.js")); bundles.Add(new StyleBundle("~/bundles/css").Include( "~/Styles/*.css")); } } 
  3. Enregistrez la classe BundleConfig au démarrage de l’application dans le fichier global.asax.

     void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); } 
  4. référencer les ensembles dans votre document HTML.
  5. Activez le regroupement en désactivant le mode débogage.

En plus des réponses données ci-dessus, j’aimerais mentionner qu’il y avait une étape importante oubliée:

Après avoir installé le package NuGet pour Microsoft.AspNet.Web.Optimization et enregistré les ensembles dans le fichier Global.asax (comme expliqué dans la réponse de Claies ), vous devez append les méthodes de rendu pour les styles et les scripts, comme suit:

 <%= Styles.Render("~/bundles/css") %> <%= Scripts.Render("~/bundles/MattsUIBundle/js") %> 

Cela doit être ajouté à la section d’en-tête de la page ASPX pour que les ensembles “~ / bundles / js” et “~ / bundles / css” soient ajoutés plus tôt à votre page. Sans cela, il n’apparaîtra pas (voir pourquoi ai-je besoin de rendre? ). Il faut que vous ajoutiez

 <%@ Import Namespace="System.Web.Optimization" %> 

à la ligne 2 de votre page afin d’enregistrer l’espace de nom, en supposant que vous ayez déjà ajouté le package NUGET Microsoft.AspNet.Web.Optimization à votre code.

Si vous souhaitez inclure plus de fichiers liés, faites-le comme

 void Application_Start() { BundleCollection bundles=BundleTable.Bundles; var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js"); jsMattsBundle.Include("~/Scripts/lib/jquery.min.js"); jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js"); jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js"); bundles.Add(jsMattsBundle); } 

ou plus simplement

  jsMattsBundle.Include("~/Scripts/lib/jquery.min.js", "~/Scripts/lib/jquery-ui.custom.min.js", "~/Scripts/lib/jquery.watermark.min.js"); 

Cela regroupera tous les 3 scripts sous le chemin virtuel "~/bundles/MattsUIBundle/js" .


Important: Le groupage vérifiera si vous êtes en mode débogage ou en mode libération. Les optimisations ne s’appliquent que si vous supprimez l’indicateur de débogage dans web.config

  

ou si vous définissez explicitement à l’intérieur d’ Application_Start vous voulez optimiser le mode de débogage:

 BundleTable.EnableOptimizations = true; 

De même, si vous utilisez le support CDN , activez-le via

 BundleTable.Bundles.UseCdn = true; //enable CDN support 

qui vous permettra de déclarer

 var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); 

Notez que le CDN ne sera utilisé qu’en mode de libération. Le script suivant garantit qu’une copie locale de jQuery est chargée en cas d’échec du chargement du CDN:

  <%= Scripts.Render("~/bundles/jquery") %>  

en supposant que vous fournissez une copie locale de jQuery 1.7.1 à "~/Scripts" .


Remarque: dans MVC Razor, le rendu de la syntaxe est le suivant:

 @Scripts.Render("~/bundles/MattsUIBundle/js") @Styles.Render("~/bundles/css") 

Plus d’informations peuvent être trouvées ici.

Pour gagner de la vitesse de chargement de fichiers dans votre SPA, vous avez besoin de temps manuel lors de la configuration. La mauvaise réponse est de mettre en œuvre Razor, en particulier si votre objective était de restr à l’écart de MVC et de ses amis (ce qui est une bonne chose si votre objective est un SPA AngularJS). Lorsque vous implémentez la structure d’optimisation mentionnée dans d’autres réponses, vous devez maintenant appuyer sur View Engine pour générer des fichiers CSHTML, ce qui représente un impact considérable sur votre vitesse, probablement plus que ce que vous pensez enregistrer.

Donc, comme je l’ai dit, vous auriez besoin de temps de développement pour minimiser les fichiers. Vous devrez les envoyer manuellement à un CDN que vous possédez (ou avez besoin de configurer). Vous pouvez ensuite référencer votre propre CDN avec vos propres packages configurés par votre équipe, et ce CDN sera mis en cache par les navigateurs de l’utilisateur.

Ensuite, lorsqu’un ou plusieurs membres de votre SPA doivent pointer sur un HTML / CSS / JS mis à jour, vous incrémentez la version CDN de cette application SPA. D’autres applications SPA peuvent même restr les mêmes avec une ancienne version (bien que je vous recommande d’essayer de vous en tenir aux versions CDN les plus récentes). Et les navigateurs de l’utilisateur reconnaîtront la nouvelle version du CDN et extrairont une nouvelle version à mettre en cache.

@ Matt, en fait, vous n’avez pas besoin d’append

 <%@ Import Namespace="System.Web.Optimization" %> <%= Styles.Render("~/bundles/css") %> <%= Scripts.Render("~/bundles/MattsUIBundle/js") %> 

Et vous n’avez pas besoin d’utiliser CSHTML-template. Vous pouvez référencer vos bundles de cette manière à partir d’une page html:

   

Cela sauvera votre page de View Engine.

Vous pouvez utiliser YUI ou Google Clouser Mapper

Voici l’exemple d’utilisation de YUI avec Visual Studio

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

Ce lien contient les extensions Visual Studio http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

Vous pouvez utiliser l’utilisateur JSMIN http://www.crockford.com/javascript/jsmin.html

Vous pouvez exécuter JsMin en tant qu’événement post-construction comme suit: jsmin <"$ (ProjectDir) \ debug.js"> “$ (ProjectDir) \ min.js”

C’est le lien pour exécuter JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

Si cela répond à votre question, veuillez vérifier à droite sur le côté gauche.

Vous pouvez également utiliser la minification WebEssentials de VS extention qui permet de minifier vos fichiers js / css indépendamment de la compilation du projet (de sorte que vous n’ayez besoin d’aucune dépendance dll tierce). Il est également très pratique de grouper.