从ASP.NET MVC捆绑迁移到Grunt / Bower?

时间:2015-03-16 13:07:50

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

使用ASP.NET 5,我将从ASP.NET MVC的捆绑系统转移到Bower / Grunt工作流程,以进行客户端软件包管理和捆绑/缩小。我试图弄清楚如何密切复制MVC捆绑功能。

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

我已成功与Bower建立Grunt以下拉包并将其复制到适当的最终目的地,但开发和生产之间没有区别。什么是我现有的MVC捆绑工作流程最接近的功能?

4 个答案:

答案 0 :(得分: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为你缩小你的东西。

答案 1 :(得分:1)

经过一天的痛苦之后,我的咕噜声基本上与asp.net缩小相同的方式与debug&发布版本。

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

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

答案 2 :(得分:0)

答案 3 :(得分:0)

我非常喜欢Yeoman在角度生成器中处理资产的方式。它使用wiredep在index.html中自动包含Bower包。 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-wiredepgrunt-filerevgrunt-usemin

您需要在MSBuild之后添加一个grunt构建过程,该过程接收bin文件夹中的文件并在其上运行这些grunt任务。