MVC4 Minificazione file Javascript e CSS (Creazione Bundle)

Buongiorno a tutti

oggi vorrei condividere con voi una delle funzionalità da me più apprezzate, introdotte con la versione 4 del framework MVC: La minificazione dei file javascript e CSS. Aggregare e minificare i file javascript e CSS statici delle nostre applicazioni Web è una cosa buona e giusta. Già da tempo esistevano librerie .NET e non per fare questo, oggi, scaricando il pacchetto MVC4, ne ritroviamo una nuova.

Come prima cosa sappiate che dovrete usare Visual Studio 2010 o 2012.
Scaricate il pacchetto dal seguente indirizzo:

http://www.asp.net/mvc/mvc4

Una volta installato il pacchetto potrete creare facilmente un nuovo progetto Web, con framework MVC4.

Il progetto che verrà creato avrà una cartella "packages", con tutte le dll "Nuove", da poter includere nel vostro progetto. La libreria che fornisce le funzionalità per aggregare e minificare i file statici è la

    System.Web.Optimization

Per semplicità esaminiamo i file che sono presenti nel progetto base "ASP.NET MCV4 Web Applicazion".
In questo progetto troviamo i file javascript nella cartella "Scripts" e i file CSS nella cartella "Content".

La prima cosa da fare è capire come funzionano e come modificare i "Bundle". Questi "Bundle" sono degli insiemi di file. Aprite il file Global.asax e troverete la seguente riga

    BundleConfig.RegisterBundles(BundleTable.Bundles);

La funzione "RegisterBundles" contiene la creazione dei "Bundle":

// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

Questi Bundle vengono richiamati nel file di Layout (Razor o ASP.NET) dagli Helper "Scripts" e "Styles":

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

Questi Helper scrivono nell'html un output diverso, a seconda che l'applicazione sia configurata per essere eseguita in "Debug" o "Release". In Debug verranno richiamati TUTTI i file del bundle, singolarmente e non minificati. In Ralease i file dei Bundle verranno restituiti come un unico file, minificato. Il link al file conterrà inoltre un parametro "v", che varierà se uno dei file inclusi nel Bundle sarà variato. Questo assicurerà che gli utilizzatori del sito scarichino sempre l'ultima versione dei file statici.

ATTENZIONE! 

• Al momento, i Bundle ignorano i file se è presente solo la versione minificata (file con estensione .min.js )
• Al momento se sono presenti le due versioni di un file, quella minificata e quella non minificata, il Bundle include la versione minificata.

Spero che questo articolo vi sia stato d'aiuto.
Buon divertimento!