在 Visual Studio 中创建的 Angular SPA 应用程序中的捆绑和缩小答案

【问题标题】：Bundling and Minification in a Angular SPA application created in Visual Studio在 Visual Studio 中创建的 Angular SPA 应用程序中的捆绑和缩小
【发布时间】：2016-12-13 16:56:38
【问题描述】：

我们有一个在 Visual Studio 2015 中创建的 Angular SPA 应用程序。在 Visual Studio 中，这是一个 MVC 应用程序。我们有 Layout.cshtml，所有内容页面都是常规的 HTML 页面。我们正在使用角度路由在不同页面之间导航。我们如何在常规 HTML 页面中使用 Visual Studio 捆绑和缩小？

【问题讨论】：

几个月前我已经这样做了，但我仅限于索引页面来加载所有必要的资源并从服务器加载常量以将其公开给前端
我也阅读了这篇文章codeproject.com/Articles/1033076/…，尽管这个解决方案有效，但我认为这是一个矫枉过正

标签： c# angularjs visual-studio bundling-and-minification

【解决方案1】：

Visual Studio ASP.net 项目可以使用 gulp 作为默认模板管理器，请阅读： https://docs.asp.net/en/latest/client-side/using-gulp.html

文档中提到该项目是 dotnet 的核心版本，但实际上并不是必需的。

你将不得不使用Node.js + Tools for visual studio。

你可以自己安装 Gulp：

npm install gulp -g

1。第一步是将 GULP 添加为包依赖项（连同它的包）： 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。编辑 gulpfile.js 以添加所需的依赖项（使用的示例这里是 CSS、JS 和 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。最后一步是通过编辑 gulpfile.js 的后半部分来添加 gulp 任务以添加所需的任务：

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。完成后，您可以通过命令行或设置运行gulp min 任务运行计划（不确定它是否适用于预核心版本但值得一试），如果没有，您可以手动安排 pre 或 post 通过项目属性中可用的环境构建任务：

【讨论】：