随着 ASP.NET 5,我正在从 ASP.NET MVC的捆绑系统转移到Bower/Grunt工作流程,用于我的客户端包管理和捆绑/缩小。我正在尝试弄清楚如何密切复制MVC捆绑功能。
使用 MVC 捆绑,我手动创建了所有捆绑包,然后调用帮助程序方法,例如:@Styles.Render("~/bundles/styles/site")
。在开发中,我为捆绑包中的每个CSS文件获得单独的链接元素,而在生产中,我得到一个组合和缩小的CSS文件。
我已经成功地用 Bower 设置了 Grunt 来下拉包并将它们复制到适当的最终目的地,但开发和生产之间没有区别。与我现有的 MVC 捆绑工作流程最接近的功能是什么?
下面的这篇文章解释了一种非常好的方法,让两者(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 为您缩小内容。
经过一天的痛苦,我得到了咕噜声,基本上与调试和发布版本中 asp.net 缩小的方式相同。
我已经整理了一个 git 存储库,因此您可以根据需要提取所有相关文件和 mod。
https://github.com/glaidler/grunt-equivalent-asp.net-minification
您可以使用 grunt contrib css min 任务来创建你的 css
捆绑包阅读这篇文章 : http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS
我是Yeoman在角度生成器中处理资产的方式的忠实粉丝。它使用 wiredep 自动将 Bower 包包含在您的索引.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 之后添加一个繁琐的生成过程,该进程获取 bin 文件夹中的文件并对其运行这些繁琐的任务。