Question

我完全迷失在这个概念上。我正在研究新的ASP5 / MVC6模式，并希望做到以下几点：

在我的<environment>中使用_Layout.cshtml个助手，仅根据环境包含完整与缩小的来源
使用Gulp将源注入正确的<environment>助手
在构建/更改源时本地触发此注入，以及它在生产环境（Azure）中的工作原理？
我的wwwroot目录是否应该是只能对浏览器提供服务的静态文件？ IE：我将源site.js和site.css放在这里...但是我应该将这些源文件放在其他地方并使用Gulp构建它们然后将它们放在wwwroot中

我的项目结构如下：

/site
  /wwwroot
    /css
      site.css
    /js
      site.js
    /img
      logo.png
    /lib
      /bootstrap
      /jquery
  /Controllers
  /Views
  project.json
  bower.json

我的_Layout.cshtml有：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>

    <environment name="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment name="Staging,Production">
        <!-- How to inject minified version here? -->
    </environment>
</head>
<body>
    <main>
        @RenderBody()
    </main>

    <environment name="Development">
        <script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script type="text/javascript" src="~/js/site.js"></script>
    </environment>
    <environment name="Staging,Production">
        <!-- How to inject minified version here? -->
    </environment>
</body>
</html>

我找到this来设置ASPNET_ENV，虽然我不确定它是否仍然有效/最新。

我真正的沮丧来自：

设置Gulp以简单地构建我的源js / css，缩小它并输出它以便我可以从我的html中引用它。

注意：指向第三方库很容易，因为我可以在<environment>助手中对其进行硬编码。这只是我自己的来源，我不确定最佳做法是什么。

Answer 1

您可以使用Gulp缩小和连接文件，并在wwwroot内输出包。

然后在_layout.cshtml中，您可以使用asp-append-version标记帮助程序将文件的哈希值附加到URI以进行缓存清除。在这里，我将第三方脚本与site.js捆绑在一起，但如果您愿意，可以单独缩小它们;这个概念是一样的......

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/bundles/js/site-bundle.min.js" asp-append-version="true"></script>
</environment>

这里是gulpfile的摘录，它正在进行捆绑和缩小（它是来自generator-aspnet的修改版本）...

var paths = {
  js: [
    webroot + "lib/jquery/dist/jquery.min.js",
    webroot + "lib/bootstrap/dist/js/bootstrap.js",
    webroot + "js/**/*.js"
  ],
  minJs: webroot + "js/**/*.min.js",
  concatJsDest: webroot + "bundles/js/site-bundle.min.js",

  // ...

};

gulp.task("min:js", function () {
  return gulp.src(paths.js.concat(["!" + paths.minJs]), {
    base: "."
  })
    .pipe(concat(paths.concatJsDest))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

我在这里有一个完整的工作样本： https://github.com/bigfont/asp-net-core-vnow/tree/master/App06Bundling

如何在不同的环境中使用gulp和新的mvc6标签助手？

1 个答案: