Gruntjs 如何配置grunt';s usemin:css任务重写rev';三维图像?
我正在使用Yeoman生成器构建一个站点: 我使用bower通过以下操作安装了fancybox:Gruntjs 如何配置grunt';s usemin:css任务重写rev';三维图像?,gruntjs,fancybox-2,bower,Gruntjs,Fancybox 2,Bower,我正在使用Yeoman生成器构建一个站点: 我使用bower通过以下操作安装了fancybox: bower安装fancybox——保存 将fancybox脚本include添加到index.html中的my usemin构建块中 @import./bower\u components/fancybox/source/jquery.fancybox.css”到我唯一的.less文件中 最后,在grunt的copy任务中使用以下配置跨fancybox供应商映像进行复制 代码: //Gruntf
bower安装fancybox——保存
- 将fancybox脚本include添加到index.html中的my usemin构建块中
@import./bower\u components/fancybox/source/jquery.fancybox.css”编码>到我唯一的.less文件中
- 最后,在grunt的
任务中使用以下配置跨fancybox供应商映像进行复制copy
//Gruntfile.js
...
副本:{
地区:{
档案:[{
是的,
多特:没错,
cwd:“”,
目标:'',
src:[
“*.{ico,png,txt}”,
“.htaccess”,
'images/{,*/}*{webp,gif}']
}, {
是的,
多特:没错,
cwd:“/bower_components/fancybox/source”,
src:“***.{png,jpg,jpeg,gif}”,
dest:“/bower\u components/fancybox/source”
}]
},
...
(很抱歉,不知道为什么格式会出现问题…)
这对我来说是可行的,但我想更进一步,以便更好地了解正在发生的事情。这之所以有效,仅仅是因为我在复制app/中使用的相对路径
我希望将bower资产与我的其他图像一起复制,并重写html中的路径(如imagemin和usemin等)
。。。。
}, {
是的,
多特:没错,
cwd:“/bower_components/fancybox/source”,
src:“***.{png,jpg,jpeg,gif}”,
目标:'/images'
}]
....
如何使用此软件包的约定实现这一点?
- (我看到了其他建议:)
- 我已尝试更改
,并添加dest:path
flatte:true
以grunt build
,copy
,rev
完成usemin
正在向fancybox文件添加版本号rev
- usemin执行usemin:html并重写所有图像文件名以匹配修订版文件
- usemin:css然后运行,但不列出任何重写,然后grunt完成:
运行“usemin:css”(usemin)任务
作为CSS处理-dist/styles/cf3b732a.main.CSS
使用新的img文件名更新CSS
完成,没有错误。
// Gruntfile.js
...
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.{webp,gif}']
}, {
expand: true,
dot: true,
cwd: '<%= yeoman.app %>/bower_components/fancybox/source',
src: '**/*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/bower_components/fancybox/source'
}]
},
...
....
}, {
expand : true,
dot : true,
cwd : '<%= yeoman.app %>/bower_components/fancybox/source',
src : '**/*.{png,jpg,jpeg,gif}',
dest : '<%= yeoman.dist %>/images'
}]
....