代码之家 › 专栏 › 技术社区 › LavaHot

如何将一个捆绑包与gulp MVC 6分开进行调试?

bundling-and-minification gulp asp.net-mvc asp.net

LavaHot · 技术社区 · 9 年前

我有一个相当大的Angular应用程序,在我的项目中,有很多javascript文件分散在树中。这是一个MVC5项目,我用它进行了转换 these MVC6使用Browserify的说明。一切看起来都很好,只是我不需要在开发构建中使用捆绑包,而是需要单独包含每个脚本文件。 These articles 显示了根据环境变量用静态标记替换捆绑包的稍微不同的方法,但我必须为调试版本单独指定每个文件。有什么方法可以动态指定要包含哪些文件吗?

1 回复 | 直到 7 年前

Community Rick James 7 年前

你应该使用 environment 标签助手。

环境助手允许我们根据环境有条件地渲染脚本。(迷你捆绑版与所有非迷你版)

<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

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( 查看->其他窗口->任务运行器资源管理器 ),右键单击我们创建的此新任务( 将所有脚本绑定到一个 )并选择跑 .

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

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

如果您不希望每次都手动运行此吞咽任务,您可以选择 Bindings -> Before build 这样,每次构建项目时,它都会自动运行特定的吞咽任务。