Gulp 带来的乐趣以及创建自动化项目构建 - 系列文章的第一部分
在 VS 2015+ 中构建 Web 应用程序时，使用 NuGet 并不总是首选的包管理方法，因为它会限制您的创造力并阻碍学习。
如何利用 Bower 和 Gulp 进行自动化项目构建，以创建最快的 Content Delivery Speed
引言
有时，使用 NuGet 管理 Web 项目中的所有包是错误的选择，因为它会限制自动化构建在未来使用的全部潜力。当我提到自动化构建时，我提议有机会利用 Bower 和 NuGet 一起做一些真正令人兴奋且有益的事情，然后能够使用 Gulp 通过脚本自动化完全构建一个项目。
Gulp 自动化非常酷，因为您可以编写脚本从您的 bower 库中获取包，然后运行分发构建到您 Web 项目中的指定文件夹。这个指定的文件夹还将包含您的自定义 CSS、Artwork 和原始格式的脚本，并将与 bower 包库一起作为您的资源存储库。现在您在项目中拥有了一个我们可以称之为“Assets”的资源存储库，您可以自由地将您的资源分发到适当的位置。但是，如果我告诉您，您还可以 Minify、Uglify、Concat 并将单个文件捆绑到文件组中；这将是最终 Web 项目部署的构建块或基础。
那么，什么是最终的项目构建？我将其定义为能够获取 BootStrap、JQuery、Font-Awesome 和其他技术，然后将脚本、CSS 和图像分开，并将它们重新打包成单个文件，这些文件会去除注释、被压缩或缩小，然后将每个类别合并成一个单元。考虑一下；在构建您的 Web 项目的 CSS 部分时，大多数最终会得到大约 12 到 30 个 CSS 链接，代表单个文件。使用 Gulp，您可以将这些自动化成 1、2 或 3 个捆绑文件，这些文件被压缩以获得尽可能小的文件大小，并减少对 Web 服务器的调用，从而提高页面加载速度。
历史
我曾经非常忠于微软，十多年来，我一直接受 Visual Studio 的构建方式，认为这是构建项目基础的正确方法。但当我不知道所有包的作用以及如何使用它们时，我总是被困住并陷入困境。所以是时候停止这种做法，向前迈进，尝试一些新的东西了。我阅读了关于 Walmart 的文章，了解他们是如何使用 Gulp 和 Bower 的，这引起了我的兴趣，并尝试了一下。
三年前，我对这个发现感到非常兴奋，并在一个帖子中分享了它，很多人也对此感兴趣并想了解更多。我答应他们我会回来记录整个过程，但被推迟了，因为这个概念太庞大了，我认为它不会被接受，而 VS 2015 需要过多的自定义来构建这个环境。然后 VS 2017 发布了，我之前的很多自定义工作实际上已经被包含或内置进去了。经过 VS 2017 的多次更新，使用它现在更加容易，因为他们添加了 Bower 包管理，这对我来说意味着我走在正确的道路上，是时候谈论它了。
jkirkerx使用 Visual Studios 预定义的项目在开始时很有用，但很快就会明智地从空白项目开始，这样您就可以从头开始构建，真正了解每个包的作用以及如何分发它。这是一个巨大的倒退，但回报是巨大的进步和知识与薪资的巨大飞跃。
CDN 与自托管
我不想争论是使用 CDN 的正确方法还是您的组织选择不使用 CDN。两者都有优点和缺点，我们可以争论个没完。我个人使用 CDN 来测试代码，仅此而已。
NuGet vs Bower
我只将 NuGet 用于技术包，如 MVC、X.PagedList 和 System Stuff，如 Linq 和 System.Runtime。但我使用 Bower 来处理 Bootstrap、Font-Awesome、JQuery 等。我永远不会为 Bootstrap 使用 NuGet 的原因是，我不喜欢 NuGet 分发包的方式。您知道这些 NuGet 包是由许多不同想法的个人创建的，他们选择不同的文件夹来存储资源。随着时间的推移，这些文件夹将无法匹配另一个包的位置，这会将您逼入困境。
对我来说，Bower 更易于处理。它易于控制包的版本，并且所有包都下载到您指定的指定位置。将 bower 视为处理仅包含脚本和 CSS 的包（如 LightSlider）的理想选择。对于这些类型的包，无需更新 web.config，因此没有必要使用 NuGet。
我宁愿直接从 GitHub 上的作者那里添加包，也不愿使用 NuGet 包。这让我可以更细致地选择，获取一个没有不必要东西的包，不像典型的 NuGet 包那样臃肿。
jkirkerx不要让 NuGet 将您的项目平台困住。对于与 .Net 无关且在其环境之外的包，请使用 Bower。请记住，Bootstrap 与 .Net 没有任何关系，因为它只是 CSS、脚本与 HTML 的组合。
什么是 Gulp？
Gulp 是一个用于自动化构建项目任务的工具包。它基本上是一些 JavaScript 或 JQuery，可以将命令通过管道连接起来。使用 gulp，您可以构建一个包含 minification、Uglification、Concatenation 等工具的库，并在您的构建中使用这些工具。起初很难理解，有点令人费解，但有了正确的教程，它可以很容易地解释。
我们可以在 gulp 文件中编写 gulp 脚本，并从 Task Runner Explorer 中运行单个任务。所以目前我使用五个任务。
- run_Distrubution_Unpack
我使用这个任务来解压我的 bower 库中的包并将它们复制到我的 assets 存储库。我仔细选择我想要使用的文件，留下其余的。我并不使用库中的所有包，我可以自由选择加载哪些包。
- run_Distrubution_Build
这是我的魔法脚本，它压缩、缩小、混淆我 assets 存储库中来自我的 Bower 库的 CSS 和脚本。然后，我对我自己编写的 CSS 和 JS 执行相同的操作。
- run_Project_Build
这是另一个魔法脚本，它将混淆、缩小并去除注释的文件捆绑或创建成新的单个文件包。然后将它们复制到最终目的地。
之后，我获取该单个文件的 URL 并将其放置在 CSS 的头部或脚本的尾部。我还压缩我存储在存储库中的所有图像文件，然后将它们复制到图像目的地。
- run_Project_Clean
我使用这个任务来删除我的 assets 存储库，同时保留我的自定义脚本。
那么，为什么我有一个 Assets Depository？
在我最初的设计时，我选择创建一个名为 assets 的文件夹，因为我开始时完全不知道自己在做什么。我有一些包，然后我有一些自己编写的代码，我需要一个地方来存储原始副本，以防我犯错误，最终结果是错误的。我发现我不能将所有东西都打包到一个文件中，因为有时代码会出错。所以做这件事有点实验性。
我可以看到在这里就我的存储库概念展开争论或辩论，我自己也在辩论这个问题，因为我想摆脱它。一方面，这有点傻，因为我有一个标记为“请勿发布”的库，可以使我的项目更小。当然，我可以将我的存储库标记为“请勿发布”，但有时我不得不去服务器上备份原始文件。
立即开始
三年前，我不得不解释如何创建这个环境，这对于支持各种 VS 版本来说将是复杂的。我认为 VS2015 是第一个可以实现这一点的版本。
我选择不发布关于如何安装这些组件的文章，因为对于想要立即开始的每个人来说，这将是不同的。相反，我将在本文的下一部分介绍如何编写 Gulp 文件，并深入探讨哪些有效，哪些无效。
所以，请使用搜索引擎学习如何准备或构建您的 Visual Studio 版本以支持 Node.js、Bower 和 Gulp，并确保您已准备就绪。我将回来撰写第二部分，以便您可以为自己实现神奇的效果，并将下一篇文章链接到此处以继续。
优势和原因
我现在将解释我走这条路的“疯狂”背后的原因。这一切都始于 SEO 优化和我提高分数、超越 WordPress 的追求。我的目标只是让 MVC 成为一个值得关注的工具，并提供我在这里提交的框架作为大家跟随的胡萝卜，将 MVC 项目提升到一个消费者需求的高度。
速度对您的 SEO 评分和加载时间至关重要，无论设备是通过有线连接还是通过 RF 信号（如蜂窝网络）传输。
考虑更快的下载速度、完美的 CSS 和脚本整合以及我们构建的项目（无论是 MVC、Core 还是 WebForms）的顶级 SEO 排名。
速度是赛车之王
在赛车中，我们使用测功机测量发动机的马力和扭矩，并使用计算机对 ECU 进行微调。网站与汽车无异，需要进行调整以获得最佳性能。不要依赖服务器的 CPU 来解决速度问题，因为糟糕的项目部署会使您的网站成功或失败，您将输掉比赛。
定期测量和检查您的速度评分是微调您的网站性能评分的关键。缓慢的网站（页面尺寸也很大）会在一天内耗尽用户的流量套餐。
敬请期待更多内容
请继续关注本系列文章的下一部分，介绍如何使用 Bower 和 Gulp 进行自动化项目构建，以及如何利用这些工具实现最快的 Content Delivery。接下来，我将向您展示如何使用 Bootstrap V4、JQuery、Font-Awesome Free 构建 Gulp 文件，以及如何将它们合并为单个包加载。