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

Question

我有一个相当大的 Angular 应用程序，它有很多 javascript 文件分散在我项目的树中。这是一个 MVC 5 项目，我用 instructions to MVC 6 to use Browserify. Everything seems to work great, except that I need to not use a bundle in my development builds and instead include every script file separately. 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 文件等。

查看以了解如何使用 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("."));
});

现在打开Task 运行ner (View->Other Windows->Task 运行ner Explorer),右键点击我们创建的这个新任务（bundleAllScriptsToOne）和select 运行。

这将生成一个名为 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 任务，您可以 select Bindings -> Before build 这样会自动运行每次构建项目时都会执行特定的 gulp 任务。

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

How do I unbundle a bundle with gulp MVC 6 for debugging?

asp.net

asp.net-mvc

bundling-and-minification

gulp