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

With ASP.NET 5, I am moving from ASP.NET MVC's bundling system to a Bower/Grunt workflow for my client-side package management and bundling/minification. I'm trying to figure out how to closely replicate the MVC bundling functionality.

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

With MVC bundling, I manually created all of my bundles and then call out to a helper method such as: @Styles.Render("~/bundles/styles/site"). In development I get separate link element for each CSS file in the bundle and in production I get a single combined and minified CSS file.

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

I have successfully set up Grunt with Bower to pull down packages and copy them into the appropriate final destination, but there's no differentiation between development and production. What's the closest functionality to my existing MVC bundling workflow?

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

4 个解决方案

#1

This article below explain a very nice way to have both (Bower and .NET Bundle Config) playing nicely together...

下面的这篇文章解释了一个非常好的方法让两个(Bower和.NET Bundle Config)很好地一起玩...

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

The key info, is to use a Grunt Task (wiredep) to target the BundleConfig.cs file so you could still use bower to manage your dependencies and still use BundleConfig to let .NET minify your stuff for you.

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

#2

After a day of pain, I have got grunt basically behaving in the same manner as asp.net minification with debug & release builds.

经过一天的痛苦之后,我的grunt基本上与asp.net缩小与调试和发布版本一样。

I have put together a git repo so you can just pull all the relevant files and mod as required.

我已经把一个git repo放在一起,所以你可以根据需要拉出所有相关文件和mod。

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

#3

You can use the grunt contrib css min task to create a bundle of your css
Read this post : http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS

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

#4

I'm a pretty big fan of the way Yeoman handles assets in the angular generator. It uses wiredep to automatically include Bower packages in your index.html. Usemin is used to group files you want in bundles and Filerev updates the asset locations and adds a cache breaker. Here is the a sample of some of the Grunt settings I have.

我非常喜欢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)"/]
      ]
    }
  }
},

The relevant npm packages are grunt-wiredep, grunt-filerev, and grunt-usemin

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

You will need to add a grunt build process after MSBuild that takes the files in your bin folder and runs these grunt tasks on them.

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

#1