如何使用 gulp MVC 6 解绑捆绑包以进行调试？

Question

我有一个相当大的 Angular 应用程序，其中有很多 javascript 文件分散在我的项目的树中。这是一个 MVC 5 项目，我使用 these 指令将其转换为 MVC 6 以使用 Browserify。一切似乎都很好，除了我不需要在我的开发版本中使用包，而是分别包含每个脚本文件。 These articles 显示了根据环境变量用静态标记替换捆绑包的略有不同的方法，但我必须为调试版本单独指定每个文件。有什么方法可以动态指定要包含的文件吗？

Answer 1

你应该使用environment标签助手。

环境助手允许我们根据环境有条件地渲染脚本。 （Minified-Bundled 版本 vs All Un 缩小版本）

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/ScriptForPage1.js"></script>
    <script src="~/js/SomeOtherScript.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
    </script>         
    <script src="~/js/CombinedVersionOfAllScripts.min.js" asp-file-version="true"></script>
</environment>

确保您已在Configure() 方法内（在Startup.cs 内）调用了UseStaticFiles() 方法。此扩展方法可以实现静态文件服务，包括 js 文件、css 文件等。

查看this post 了解如何使用 gulp 缩小 js 文件

---

如果有 100 多个 js 文件，并且您不希望为每个脚本文件添加一个脚本标签，您可以考虑将所有文件捆绑到一个文件中并使用它。

为此，将新的 gulp 任务添加到您的 gulpfile.js

paths.bundledJsDest = paths.webroot + "js/bundledSingleFile.js";

gulp.task("bundleAllScriptsToOne", function () {
    gulp.src([paths.js, "!" + paths.minJs, "!" + paths.bundledJsDest])
        .pipe(concat(paths.bundledJsDest))
        .pipe(gulp.dest("."));
});

现在打开任务运行器（View->Other Windows->Task Runner Explorer），右键单击我们创建的这个新任务（bundleAllScriptsToOne strong>) 并选择运行。

这将生成一个名为bundledSingleFile.js 的新js 文件。它的内容将是来自 js 文件夹内所有其他脚本文件的脚本内容（缩小的除外）。您可以在开发环境中的布局中包含此单个文件。您可以在生产环境中使用缩小的（由另一个 gulp 任务生成）。

<environment names="Development">
    <script src="~/js/bundledSingleFile.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/js/yourSite.min.js" asp-file-version="true"></script>
</environment>

如果您希望从另一个文件夹（或子文件夹）获取所有脚本，只需更新您传递给gulp.src()的路径即可

如果您不希望每次都手动运行此 gulp 任务，您可以选择 Bindings -> Before build 以便在您每次构建项目时自动运行该特定 gulp 任务。