6

Mit ASP.NET 5, bin ich von ASP.NET MVC-Bundling-System zu einem Bower/Grunt-Workflow für meine Client-Side-Paket-Management und Bündelung/Minification. Ich versuche herauszufinden, wie die MVC-Bündelungsfunktion genau repliziert werden kann.Migrieren zu Grunt/Bower von ASP.NET MVC Bündelung?

Mit MVC-Bündelung, ich manuell erstellt alle meine Bundles und rufen Sie dann zu einer Hilfsmethode wie: @Styles.Render("~/bundles/styles/site"). In der Entwicklung bekomme ich für jede CSS-Datei im Bundle ein eigenes Link-Element und in der Produktion bekomme ich eine einzelne kombinierte und minimierte CSS-Datei.

Ich habe erfolgreich Grunt mit Bower eingerichtet, um Pakete herunter zu ziehen und sie an das entsprechende Ziel zu kopieren, aber es gibt keine Unterscheidung zwischen Entwicklung und Produktion. Was ist die beste Funktionalität zu meinem bestehenden MVC-Bündelungsworkflow?

+0

Haben Sie Grund zur Sorge haben baut? Was ist mit Bereitstellungen? Verwenden Sie WebDeploy oder kopieren Sie nur die kompilierten Dateien? – Slick86

+0

Gute Frage. Für Builds nutze ich TeamCity und deploye dann mit OctopusDeploy. Es ist alles automatisiert und funktioniert derzeit recht gut. –

+0

Eine neue Methode der MVC-Bündelung ist nicht implementiert, aber geplant: https://github.com/aspnet/Mvc/issues/2024 –

Antwort

0

Ich bin ein ziemlich großer Fan von der Art und Weise Yeoman Griffe Vermögenswerte im Winkelgenerator. Es verwendet den Befehl "dedep", um Bower-Pakete automatisch in Ihre index.html einzufügen. Usemin wird verwendet, um Dateien in Bündeln zu gruppieren, und Filerev aktualisiert die Asset-Speicherorte und fügt einen Cache-Breaker hinzu. Hier ist ein Beispiel für einige der Grunt-Einstellungen, die ich habe.

wiredep: { 
    app: { 
    src: ['<%= yeoman.app %>/index.html'], 
    exclude: ['bootstrap.css'], 
    fileTypes: { 
     html: { 
     replace: { 
      js: '<script src="/{{filePath}}"></script>', 
      css: '<link rel="stylesheet" href="/{{filePath}}" />' 
     } 
     } 
    }, 
    ignorePath: /\.\.\// 

    } 
}, 

// Renames files for browser caching purposes 
filerev: { 
    dist: { 
    src: [ 
     '<%= yeoman.dist %>/scripts/{,*/}*.js', 
     '<%= yeoman.dist %>/styles/{,*/}*.css', 
     '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
     '<%= yeoman.dist %>/styles/fonts/*' 
    ] 
    } 
}, 

// Reads HTML for usemin blocks to enable smart builds that automatically 
// concat, minify and revision files. Creates configurations in memory so 
// additional tasks can operate on them 
useminPrepare: { 
    html: '<%= yeoman.app %>/index.html', 
    options: { 
    dest: '<%= yeoman.dist %>', 
    flow: { 
     html: { 
     steps: { 
      js: ['concat', 'uglifyjs'], 
      css: ['cssmin'] 
     }, 
     post: {} 
     } 
    } 
    } 
}, 

// Performs rewrites based on filerev and the useminPrepare configuration 
usemin: { 
    html: ['<%= yeoman.dist %>/**/*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'], 
    patterns: { 
     js: [ 
     [/templateUrl:"(templates[/A-Za-z0-9]*\.html)"/] 
     ] 
    } 
    } 
}, 

Die entsprechenden npm Pakete sind grunt-wiredep, grunt-filerev und grunt-usemin

Sie benötigen ein Grunzen Build-Prozess nach MSBuild hinzufügen, die die Dateien in Ihrem Ordner bin nimmt und läuft diese Grunzen Aufgaben auf sie.

1

Dieser Artikel unten erklären eine sehr schöne Art und Weise beide (Bower und .NET-Bundle Config) zu haben gut zusammen spielen ...

http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/

Der Schlüssel Info, ist eine Grunt Aufgabe zu verwenden (wiredep), um die BundleConfig.cs-Datei als Ziel zu verwenden, damit Sie bower weiterhin zur Verwaltung Ihrer Abhängigkeiten verwenden und BundleConfig weiterhin verwenden können, damit .NET Ihre Daten für Sie minimiert.

Verwandte Themen