Utilizzo di Grunt, Bower, Gulp, NPM con Visual Studio 2015 per un progetto ASP.NET 4.5

Visual Studio 2015 è dotato di supporto integrato per strumenti come Grunt, Bower, Gulp e NPM per i progetti ASP.NET 5.

Tuttavia, quando creo un progetto ASP.NET 4.5.2 utilizzando Visual Studio 2015, non utilizza questi strumenti. Mi piacerebbe usare bower invece di nuget per gestire i pacchetti lato client.

Posso trovare informazioni sull’utilizzo di questi strumenti con Visual Studio 2013 (vedi questa domanda per esempio). Ma immagino che la procedura sia diversa per Visual Studio 2015 dal momento che ha incorporato il supporto per questi strumenti.

Mentre la risposta di Liviu Costea è corretta, mi ci è voluto ancora un po ‘di tempo per capire come è effettivamente fatto. Quindi ecco la mia guida passo-passo a partire da un nuovo progetto MVC ASP.NET 4.5.2. Questa guida include la gestione dei pacchetti lato client usando bower, ma non (ancora) copre bundling / grunt / gulp.

Passaggio 1 (Crea progetto)

Creare un nuovo progetto ASP.NET 4.5.2 (modello MVC) con Visual Studio 2015.

Passaggio 2 (Rimuovi raggruppamento / ottimizzazione dal progetto)

Passaggio 2.1

Disinstallare i seguenti pacchetti Nuget:

  • bootstrap
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • ANTLR
  • Modernizr
  • Rispondere

Passaggio 2.2

Rimuovi App_Start\BundleConfig.cs dal progetto.

Passaggio 2.3

Rimuovere

 using System.Web.Optimization; 

e

 BundleConfig.RegisterBundles(BundleTable.Bundles); 

da Global.asax.cs

Passaggio 2.4

Rimuovere

  

da Views\Web.config

Passaggio 2.5

Rimuovere Assembly Bindings per System.Web.Optimization e WebGrease da Web.config

Passaggio 3 (Aggiungi bower al progetto)

Passaggio 3.1

Aggiungi un nuovo file package.json al progetto (modello di elemento NPM configuration file )

Passaggio 3.2

Aggiungi bower a devDependencies :

 { "version": "1.0.0", "name": "ASP.NET", "private": true, "devDependencies": { "bower": "1.4.1" } } 

Il pacchetto bower viene installato automaticamente quando viene salvato package.json .

Passaggio 4 (Configura bower)

Passaggio 4.1

Aggiungi un nuovo file bower.json al progetto (modello di elemento Bower Configuration file )

Passaggio 4.2

Aggiungi bootstrap , jquery-validation-unobtrusive , modernizr e respond alle dipendenze:

 { "name": "ASP.NET", "private": true, "dependencies": { "bootstrap": "*", "jquery-validation-unobtrusive": "*", "modernizr": "*", "respond": "*" } } 

Questi pacchetti e le loro dipendenze vengono installati automaticamente quando bower.json viene salvato.

Passaggio 5 (Modifica Views\Shared\_Layout.cshtml )

Passaggio 5.1

Sostituire

 @Styles.Render("~/Content/css") 

con

   

Passaggio 5.2

Sostituire

 @Scripts.Render("~/bundles/modernizr") 

con

  

Passaggio 5.3

Sostituire

 @Scripts.Render("~/bundles/jquery") 

con

  

Passaggio 5.4

Sostituire

 @Scripts.Render("~/bundles/bootstrap") 

con

   

Passaggio 6 (Modifica altre fonti)

In tutte le altre viste sostituire

 @Scripts.Render("~/bundles/jqueryval") 

con

   

link utili


Bundling & Minifying

Nei commenti qui sotto LavaHot consiglia l’ estensione Bundler & Minifier come sostituzione per il bundler predefinito che rimuovo nel passaggio 2. Raccomanda anche questo articolo sul bundling con Gulp.

In realtà non è troppo diverso. È solo che c’è un supporto migliore per tutti questi all’interno di Visual Studio, ad esempio quando aggiungi nuovi elementi hai i template per i file di configurazione di bower o npm. Hai anche modelli per i file di configurazione gulp o grunt.
Ma il richiamo effettivo delle attività grunt / gulp e il loro vincolo per creare eventi è ancora fatto con Task Runner Explorer, proprio come in VS 2013.