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

Question

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

Answer 1

您应该使用environment代码帮助程序。

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

<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>

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

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

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

为此，请向gulpfile.js

添加新的gulp任务

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 runner（ View-＆gt; Other Windows-＆gt; Task Runner Explorer ），右键单击我们创建的这个新任务（ bundleAllScriptsToOne ）并选择运行。

这将生成一个名为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任务。