使用grunt在bower软件包中管理映像
我有一个快速应用程序，我正在使用bower来管理前端依赖项。 我还使用grunt通过连接，丑化，缩小和恢复所有资产来构建前端，包括使用grunt-usemin与每个凉亭组件一起提供的脚本/样式。
为了实现这一点，我将所有编译的资源（包括凉亭脚本/样式）移动到dist/public目录。 我最终得到了一个<cache-buster>.vendor.js和一个<cache-buster>.vendor.css文件，其中包含所有优化的bower组件。
问题是，我应该如何管理带有各种凉亭包装的图像？ 我可以手动将它们移动到我的images文件夹中，但我宁愿将它们打包在bower_components （它们属于的位置，在我看来），并在构建过程中将其留在咕噜声中。
任何输入将不胜感激。
Gruntfile.js（提取）
rev: {
dist: {
files: [{
src: [
'dist/public/css/{,*/}*.css',
'dist/public/js/{,*/}*.js',
'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}'
]
}]
}
},
useminPrepare: {
options: {
dest: 'dist/public'
},
jade: ['dist/views/{,*/}*.jade']
},
usemin: {
jade: ['dist/views/{,*/}*.jade'],
options: {
assetsDirs: ['dist/public'],
patterns: {
jade: require('usemin-patterns').jade
}
}
},
concurrent: {
server: [
'stylus', 'coffee'
],
dist: [
'stylus', 'coffee'
]
},
copy: {
dist: {
files: [{
expand: true,
cwd: 'views',
dest: 'dist/views',
src: '{,*/}*.jade'
}]
}
}
});
grunt.registerTask('server', [
'clean:server',
'concurrent:server',
'express:server',
'watch'
]);
grunt.registerTask('build', [
'clean:dist',
'concurrent:dist',
'copy:dist',
'useminPrepare',
'concat',
'uglify',
'cssmin',
'rev',
'usemin'
]);
layout.jade（摘录）
//-<!-- build:css(assets) css/vendor.css -->
link(href='/bower_components/nivo-slider/nivo-slider.css')
//-<!-- endbuild -->
//-<!-- build:css(.tmp) css/application.css -->
link(href='/css/one.css')
link(href='/css/two.css')
//-<!-- endbuild -->
//-<!-- build:js(assets) js/vendor.js -->
script(type='text/javascript', src='/bower_components/jquery/jquery.js')
script(type='text/javascript', src='/bower_components/nivo-slider/jquery.nivo.slider.js')
//-<!-- endbuild -->
//-<!-- build:js(.tmp) js/application.js -->
script(type='text/javascript', src='/js/one.js')
script(type='text/javascript', src='/js/two.js')
//-<!-- endbuild -->
以下是适合您的Gruntfile的解决方案：
rev: {
dist: {
files: [{
src: [
'dist/public/css/{,*/}*.css',
'dist/public/js/{,*/}*.js',
'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}',
'dist/bower_components/**/*.{png,jpg,jpeg,gif,webp,svg,eot,ttf,woff}'
]
}]
}
},
useminPrepare: {
options: {
dest: 'dist/public',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
},
jade: ['dist/views/{,*/}*.jade']
},
cssmin: {
options: {
root: 'src'
}
},
这假定您的bower_compontents目录位于名为'src'的源目录中。 在我的环境中（由Yeoman启动）它在'app'中，所以你可能需要调整cssmin。
以下是发生的事情：
首先，我们将rev校验和添加到bower_components目录中的一组可能的资源文件中。
接下来， flow配置告诉usemin跳过css文件的concat步骤。 这是因为cssmin自己进行连接，并且cssmin需要知道css文件的来源，以便对参考资源进行相对路径校正。
最后， root配置告诉cssmin从哪个路径开始搜索以查找资源。
你可以通过去dist/styles/<cache-buster>.vendor.css来检查结果是否正确，并验证图像是否有相对URL，以/ bower-components /
例如，在我的构建中，我在vendor.css中嵌入了bootstrap.css，并且它已被重写为这样：
@font-face{
font-family:'Glyphicons Halflings';
src:url(/bower_components/bootstrap/dist/fonts/2ad0632b.glyphicons-halflings-regular.eot);
（为易读性添加了换行符，它的所有内容都是现实的）。
我希望这有帮助。
给它信贷的地方，我最初发现这里：https://stackoverflow.com/a/21415649/1017787我已经调整它到你的配置，并添加修订配置。
链接地址: http://www.djcxy.com/p/76065.html