迁移到 Bower 和 Gulp 与 Visual Studio 2015

引言

我们一年多以前创建了我们的 Web 项目，当时对 NuGet 和其他 Microsoft 技术有着丰富的经验。总的来说，它是一个带有 ASP.NET Web API 和 AngularJS 的单页应用程序（SPA）。使用众所周知的 NuGet 来管理所有依赖项似乎是最直接的方法。我们在其中引用了 jQuery、AngularJS 和一堆其他客户端包。然后手动添加了一些缺失或过时的包。时间在流逝，最终我们不得不承认客户端依赖项的管理是一件非常痛苦的事情。

本文将介绍在 VS.NET Web 项目中迁移到 Bower 包管理器和 Gulp 任务运行器的过程，该过程基于真实案例。

迁移前后包添加过程

我们长期以来一直使用 .NET “生态系统”，但在使用 Nuget 进行客户端包管理时遇到了许多问题。大多数所需的包都缺失，只有少数是最新的。新的包安装例程是：

1. 查找所需功能的源代码。在大多数情况下，它会打包并在 github 上可用。

2. 从 github 下载并解压缩 zip 文件。

3. 如果提供了安装说明，请在 github 上阅读。不得不跳过所有 Bower/NPM/node.js/其他包管理器安装说明，继续搜索包含所有必需文件引用的示例。（是的，甚至不知道带有 main files 列表的 bower.json 文件。）

4. 查找、将所需文件复制到 Web 应用程序文件夹，然后将它们包含到 Visual Studio 项目中。（angularjs 和 Angular.UI.Utils 包包含数百个文件。）

5. 我们使用 Web Optimization 捆绑包进行 css/js 包含，因此必须在 BundleConfig 类中添加对样式表和 JavaScript 文件的引用。

6. 在应用程序中引用新的 angularJS 模块，并将新功能/行为包含到正确的文件中。

7. 重新启动 IIS 应用程序池，重新编译 Web 应用程序。

8. 在浏览器中测试生成的网站。如果出现任何问题，则必须回溯所采取的步骤。常见的解决方法是重复手动文件添加例程，因为还有一些文件缺失。

包升级很少进行，因为它包括了大多数手动安装步骤。Visual Studio 2015 因其开箱即用的 Bower 和 Gulp 支持而备受期待。当前添加新包的流程是：

1. 查找所需功能的源代码。在大多数情况下，它将作为 Bower 包提供。

2. 打开 bower.json 并开始输入所需的包名称。Visual Studio 自动完成功能将完成其余工作：完成包名称并建议包版本。保存 bower.json 后，包将几乎立即下载。

3. 打开 任务运行器（查看 » 其他窗口 » 任务运行器资源管理器）并运行我们的自定义“packAll”任务。（我们将在“Gulp 任务”部分更深入地探讨这些任务。）

4. 在应用程序中引用新的 angularJS 模块，并将新功能/行为包含到正确的文件中。

5. 在浏览器中测试生成的网站。如果出现任何问题，请检查包文档以获取详细信息。此时，我们可以确定包内容已加载，只需检查配置或组件使用文档。

手动“packAll”作业运行可以通过监视文件更改来实现自动化，但出于以下几个原因，我们特意将其保留为手动：

1. 由于整个模块更改过程是手动进行的，因此我们不希望有任何额外的后台进程。

2. 即使没有实际更改，生成的脚本/样式文件也可能被标记为已更新。我们不希望我们的 git 存储库历史记录有任何意外更改。

安装 Bower 和所需的包

我们的 Web 项目于 2014 年中期使用当时可用的最新 MVC 站点模板创建。这就是为什么解决方案资源管理器看起来与您在其他教程中看到的新项目（来自新模板）的创建方式略有不同。

1. 右键单击 Web 项目的名称，然后选择 添加 » 新建项…

2. 选择 Visual C# » Web » 常规，然后从列表中选择 Bower 配置文件：

3. 将文件名保留为 bower.json，然后单击“添加”。

4. 请注意，还将创建一个 Bower 配置文件 .bowerrc。它包含一个条目 directory，指定 Bower 用于存储下载的包的路径。我们将默认值更改为 client_packages：

5. 返回 bower.json。在 dependencies 节点中开始键入“jquery”，然后查看弹出的 IntelliSense：

这样我们就填满了整个依赖列表

6. 大多数依赖包都依赖于 angularJS，并且它们引用了各种版本的 angularJS。我们按照 Bower Resolutions 博文中的描述，将依赖项解析为当前版本的 angularJS：

7. 在加载 angular 之前，我们还需要加载 jquery 和 jquery-ui 。我们通过覆盖 angular 包的依赖项来实现此目的：

8. 保存 bower.json 文件后，后台执行“Bower.cmd install --force-latest”命令，一段时间后，Visual Studio 状态栏会显示“安装包完成”消息。

Bower 配置完成，下载的包可在 client_packages 文件夹中找到。

安装 Gulp 和插件

此时，我们已经收集了所有必需的包，但文件散布在 client_packages 文件夹中，在 HTML 中引用它们仍然很麻烦。手动进行效率低下、易出错且难以管理。

幸运的是，Visual Studio 2015 中提供了任务运行器。我们选择使用 Gulp，因为 ASP.NET 项目模板默认使用它。单独使用 Gulp 作用不大。大量的插件赋予了 Gulp 强大的功能。安装步骤：

1. 右键单击 Web 项目的名称，然后选择 添加 » 新建项…

2. 选择 Visual C# » Web » 常规，然后从列表中选择 NPM 配置文件。

3. 将文件名保留为 package.json，然后单击“添加”。文件将添加到项目中，并附带一些默认内容：

4. 将包添加到 devDependencies 节点中，以使其在项目中可用。我们包含：

   • gulp - gulp 任务运行器本身；

   • gulp-concat - 文件合并实用程序；

   • gulp-uglify - JavaScript 文件最小化实用程序；

   • main-bower-files - 用于从 bower 包中仅选择所需文件的实用程序。

我们在平台主 Web 项目中使用的完整 NMP 配置文件

5. 保存 package.json 文件后，包安装过程将在后台执行，并且“安装包完成”状态消息会再次出现在状态栏中。

Gulp 和实用程序已准备就绪！

Gulp 任务

为了配置和运行实际的 gulp 任务，我们将创建另一个文件，其中将处理 Bower 包并生成最终结果。

1. 右键单击 Web 项目的名称，然后选择 添加 » 新建项…

2. 选择 Visual C# » Web » 常规，然后从列表中选择 Gulp 配置文件。

3. 将文件名保留为 gulpfile.json，然后单击“添加”。该文件将添加到项目中，并附带一些默认内容。我们将其替换为以下内容：

var gulp = require("gulp"),
   mainBowerFiles = require('main-bower-files'),
   concat = require("gulp-concat"),
   uglify = require("gulp-uglify");

// minify all js files to single file
gulp.task('packJavaScript', function () {
   return gulp.src(mainBowerFiles({
       // Only the JavaScript files
       filter: /.*\.js$/i
   }))
     .pipe(concat('allPackages.js'))
     .pipe(uglify())
     .pipe(gulp.dest('Scripts'));
});
 
// concatenate all css files to single file
gulp.task('packCss', function () {
   return gulp.src(mainBowerFiles({
       // Only the CSS files
       filter: /.*\.css$/i
   }))
     .pipe(concat('allStyles.css'))
     .pipe(gulp.dest('Content'));
});
 
// copy fonts for simple packages like angular-ui-grid.
gulp.task('copyMainFonts', function () {
   return gulp.src(mainBowerFiles({
       // Only return the font files
       filter: /.*\.(eot|svg|ttf|woff)$/i
   }))
     .pipe(gulp.dest('Content'));
});

 
// font-awesome package
gulp.task('fontawesomeCss', function () {
   return gulp.src('client_packages/font-awesome/css/font-awesome.css')
    .pipe(gulp.dest('Content/themes/main/css'));
});

gulp.task('fontawesomeFonts', function () {
   return gulp.src('client_packages/font-awesome/fonts/*.*')
    .pipe(gulp.dest('Content/themes/main/fonts'));
});

gulp.task('fontawesomePackage', ['fontawesomeCss', 'fontawesomeFonts']); 
gulp.task('packAll', ['packJavaScript', 'packCss', 'copyMainFonts', 'fontawesomePackage']);

我们将任务设置得尽可能通用和简单。添加新包不应需要任何额外的活动。正如您所见，唯一的例外是 font-awesome 包。它包含字体，并使用位于其他文件夹中的 CSS。由于这种特殊结构，创建了 font-awesome 的专用任务。

4. 在解决方案资源管理器中右键单击gulpfile.js，然后选择任务运行器资源管理器。您将在左侧看到任务列表。双击“packAll”节点运行它。任务执行进度将在右侧打开。

任务很快完成，并生成以下工件：

• allPackages.js – 所有包的最小化 JavaScript；

• allStyles.js – 所有包的 CSS；

• 来自 font-awesome 包的 CSS 和字体文件已复制到 Content/themes/main 文件夹；

• 所有其他（如果有）字体文件已复制到 Content 文件夹。

引用切换

我们必须将所有先前手动（或通过 Nuget 包）引用的文件替换为上一步生成的文件。

1. 通过 Nuget 卸载所有 AngularJS 和 jQuery 相关包；

2. 删除 Content、Scripts（或其他）文件夹中所有重复 Bower 包内容的 CSS、js 文件；

3. 从 BundleConfig 类中删除对已删除文件的引用。在我们的例子中，近 60 个此类引用被删除。

4. 将 9 个生成的文件包含到项目中

请注意，（包含 Bower 和 NPM 包的）client_packages 和 node_modules 文件夹未包含在项目中。它们可被视为“包含临时数据”，并且也被排除在源代码管理之外。（保持 github 存储库整洁可以防止其增长到巨大的尺寸。顺便说一句，我们之前遇到了这个问题，并在 之前的文章 中进行了处理。）

5. 在 BundleConfig 类中引用 3 个新添加的文件（font-awesome.css、allStyles.css 和 allPackages.js）。我们使用 System.Web.Optimization 进行捆绑包注册，因为我们需要在运行时收集捆绑包。我们的平台解决方案提供了即时安装/卸载模块的功能。每个此类模块都可以包含需要加载的客户端资源。模块安装后，Web 应用程序会重启，并在启动时动态注册当前模块的资源。

结果

• 项目使用的客户端包的清晰、完整且始终最新的列表；

• 简化的包管理（包括包版本升级/降级）；

• 能够使用成熟的构建工具进行客户端脚本预处理；

• 在 platform Web 项目的引用切换过程中删除了 800 多个 (!) 文件，并且只添加了几个新文件。作为迁移的副作用，我们的项目得到了清理，删除了冗余和未使用的文件。

结论

如果您的 Web 项目是几年前开始的，并且您刚刚切换到 Visual Studio 2015，请利用新的任务运行器功能，让您的客户端开发更轻松。（即使您仍在使用 Visual Studio 2013，也可以尝试 任务运行器资源管理器 扩展。）是时候开始有效地管理您的客户端依赖项，并完全自动化 JavaScript 和 CSS 文件在 HTML 中的预处理和引用了。我们在项目中详细描述了如何迁移到 Bower 包管理器 和 Gulp 任务运行器，但希望您可以遵循这些步骤，并在您的项目中也这样做。

在此次迁移过程中，我们在项目中删除了大量文件。您将摆脱多少文件？