Bündelung und Verkleinerung in einer in Visual Studio erstellten Angular SPA-Anwendung

Question

Wir haben eine eckige SPA-Anwendung, die in Visual Studio 2015 erstellt wird. Im Visual Studio ist dies eine MVC-Anwendung. Wir haben Layout.cshtml und alle Inhaltsseiten sind reguläre HTML-Seiten. Wir verwenden das eckige Routing, um zwischen verschiedenen Seiten zu navigieren. Wie können wir die Bündelung und Verkleinerung von Visual Studio in regulären HTML-Seiten verwenden?

Answer 1

Visual Studio ASP.net-Projekte können schluck als die Standardvorlage Manager verwenden, lesen: https://docs.asp.net/en/latest/client-side/using-gulp.html

Das Dokument erwähnt das Projekt Core-Version von Dotnet aber es ist nicht wirklich erforderlich.

Sie werden Node.js + Tools for visual studio verwenden müssen.

Sie können Gulp Installieren von selbst:

npm install gulp -g 

1. Der erste Schritt ist zu hinzufügen GULP als Paket Abhängigkeit (zusammen mit seinen Paketen): http://www.davepaquette.com/archive/2014/10/08/how-to-use-gulp-in-visual-studio.aspx

npm install gulp --save-dev 
npm install gulp-concat --save-dev 
npm install gulp-cssmin --save-dev 
npm install gulp-uglify --save-dev 
npm install rimraf --save-dev 
npm install gulp-htmlmin --save-dev 

2 Bearbeiten Sie gulpfile.js, um die erforderlichen Abhängigkeiten hinzuzufügen (Beispiele sind hier sind CSS, JS und HTML):

"use strict"; 
var gulp = require("gulp"), 
rimraf = require("rimraf"), 
concat = require("gulp-concat"), 
cssmin = require("gulp-cssmin"), 
uglify = require("gulp-uglify"); 
htmlmin = require("gulp-htmlmin"); 
var paths = { 
    webroot: "./wwwroot/" 
}; 
paths.js = paths.webroot + "js/**/*.js"; 
paths.minJs = paths.webroot + "js/**/*.min.js"; 
paths.css = paths.webroot + "css/**/*.css"; 
paths.minCss = paths.webroot + "css/**/*.min.css"; 
paths.html = paths.webroot + "html/**/*.html"; 
paths.minHtml = paths.webroot + "htmlmin/**/*.html"; 
paths.concatJsDest = paths.webroot + "js/site.min.js"; 
paths.concatCssDest = paths.webroot + "css/site.min.css"; 

3. Letzter Schritt ist durch die Bearbeitung der zweiten Hälfte des Jahres gulpfile.js schluck Aufgaben hinzufügen die erforderlichen Aufgaben hinzuzufügen:

gulp.task("min:js", function() { 
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) 
    .pipe(concat(paths.concatJsDest)) 
    .pipe(uglify()) 
    .pipe(gulp.dest(".")); 
}); 

gulp.task("min:css", function() { 
    return gulp.src([paths.css, "!" + paths.minCss]) 
    .pipe(concat(paths.concatCssDest)) 
    .pipe(cssmin()) 
    .pipe(gulp.dest(".")); 
}); 
gulp.task("min:html", function() { 
    return gulp.src([paths.html, "!" + paths.minHtml]) 
    .pipe(htmlmin()) 
    .pipe(gulp.dest(".")); 
}); 
gulp.task("min", ["min:js", "min:css", "min:css"]); 

4. Nachdem Sie Sie fertig sind, können entweder laufen gulp min per Befehlszeile oder Setup ein Task Runner Zeitplan (nicht sicher, ob es mit Pre-Core-Versionen funktioniert, aber einen Versuch wert), wenn nicht, können Sie manuell eine Pre- oder Post Build-Task über die Umgebung in den Projekteigenschaften verfügbar: