从 ASP.NET MVC 捆绑迁移到 Grunt/Bower？答案

【问题标题】：Migrating to Grunt/Bower from ASP.NET MVC bundling?从 ASP.NET MVC 捆绑迁移到 Grunt/Bower？
【发布时间】：2015-05-18 14:45:00
【问题描述】：

使用 ASP.NET 5，我正在从 ASP.NET MVC 的捆绑系统迁移到 Bower/Grunt 工作流，用于我的客户端包管理和捆绑/缩小。我试图弄清楚如何密切复制 MVC 捆绑功能。

通过 MVC 捆绑，我手动创建了所有捆绑包，然后调用了一个辅助方法，例如：@Styles.Render("~/bundles/styles/site")。在开发中，我为包中的每个 CSS 文件获得单独的链接元素，而在生产中，我获得一个组合和缩小的 CSS 文件。

我已成功设置 Grunt 和 Bower 以下载包并将它们复制到适当的最终目的地，但开发和生产之间没有区别。与我现有的 MVC 捆绑工作流最接近的功能是什么？

【问题讨论】：

您需要担心构建吗？部署呢？你是使用 WebDeploy 还是只复制编译好的文件？
好问题。对于构建，我使用 TeamCity，然后使用 OctopusDeploy 进行部署。这一切都是自动化的，目前运行良好。
一种新的MVC捆绑方法尚未实现但计划中：github.com/aspnet/Mvc/issues/2024

标签： asp.net-mvc gruntjs bower bundling-and-minification asp.net-core

【解决方案1】：

下面的这篇文章解释了一种很好的方式来让两者（Bower 和 .NET Bundle Config）一起很好地发挥作用......

http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/

关键信息是使用 Grunt Task (wiredep) 来定位 BundleConfig.cs 文件，这样您仍然可以使用 bower 来管理您的依赖项并仍然使用 BundleConfig 让 .NET 为您缩小您的东西。

【讨论】：

【解决方案2】：

经过一天的痛苦，我感到咕噜咕噜的行为基本上与带有调试和发布版本的 asp.net 缩小相同。

我已经整理了一个 git repo，因此您可以根据需要提取所有相关文件和 mod。

https://github.com/glaidler/grunt-equivalent-asp.net-minification

【讨论】：

【解决方案3】：

您可以使用 grunt contrib css min 任务来创建一个 CSS 包
阅读这篇文章：http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS

【讨论】：

【解决方案4】：

我非常喜欢 Yeoman 在角度生成器中处理资产的方式。它使用wiredep 自动将Bower 包包含在您的index.html 中。 Usemin 用于将您想要的文件分组到包中，并且 Filerev 更新资产位置并添加缓存断路器。这是我拥有的一些 Grunt 设置的示例。

 wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    exclude: ['bootstrap.css'],
    fileTypes: {
      html: {
        replace: {
          js: '<script src="/{{filePath}}"></script>',
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    },
    ignorePath: /\.\.\//

  }
},

// Renames files for browser caching purposes
filerev: {
  dist: {
    src: [
      '<%= yeoman.dist %>/scripts/{,*/}*.js',
      '<%= yeoman.dist %>/styles/{,*/}*.css',
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
      '<%= yeoman.dist %>/styles/fonts/*'
    ]
  }
},

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},

// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
  html: ['<%= yeoman.dist %>/**/*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
    patterns: {
      js: [
        [/templateUrl:"(templates[/A-Za-z0-9]*\.html)"/]
      ]
    }
  }
},

相关的npm包是grunt-wiredep、grunt-filerev和grunt-usemin

您需要在 MSBuild 之后添加一个 grunt 构建过程，该过程将获取 bin 文件夹中的文件并在它们上运行这些 grunt 任务。

【讨论】：