我正在尝试将图片填充插件用于响应式图像，但 usemin 插件似乎没有在<img src=标签之外获取任何 url。有没有办法强制它使用新的缩小/缓存爆破的原始图像更改每次出现的原始图像，如下所示：
在 grunt 构建之前
// This works
<img src="images/main.jpg" />
<picture>
// This doesn't work
<source srcset="images/main.jpg" media="(min-width: 1200px)" />
<source srcset="images/main-lg.jpg" media="(min-width: 992px)" />
<source srcset="images/main-md.jpg" media="(min-width: 768px)" />
<source srcset="images/main-sm.jpg" media="(min-width: 1px)" />
// This doesn't work
<img srcset="images/main.jpg" alt="Epic punting">
</picture>
咕噜声构建后
// Updated
<img src="images/b1kajsmf.main.jpg" />
<picture>
// Not updated
<source srcset="images/main.jpg" media="(min-width: 1200px)" />
<source srcset="images/main-lg.jpg" media="(min-width: 992px)" />
<source srcset="images/main-md.jpg" media="(min-width: 768px)" />
<source srcset="images/main-sm.jpg" media="(min-width: 1px)" />
// Not updated
<img srcset="images/main.jpg" alt="Epic punting">
</picture>
如果有帮助，这是我的 gruntfile 代码：
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/scripts/{,*/}*.js',
'<%= yeoman.dist %>/public/styles/{,*/}*.css',
'<%= yeoman.dist %>/public/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
}
},
useminPrepare: {
html: ['<%= yeoman.app %>/views/index.html',
'<%= yeoman.app %>/views/index.jade'],
options: {
dest: '<%= yeoman.dist %>/public'
}
},
usemin: {
html: ['<%= yeoman.dist %>/views/{,*/}*.html',
'<%= yeoman.dist %>/views/{,*/}*.jade'],
css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>/public']
}
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
options : {
cache: false
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= yeoman.dist %>/public/images'
}]
}
}