将 grunt-usemin 与动态生成的图像路径一起使用
Using grunt-usemin with dynamically generated image paths
我正在使用Yeoman Webapp生成器来构建我的静态网站。
对于我的预加载器,我有以下代码片段(如果这很重要,我正在为 JSI 使用 requireJS)。
for(var i = 1; i <= config.numSlides; i++) {
images.push(config.imageBase + i + '.jpg');
}
如您所见,我只是生成一个带有数字的路径并向其添加.jpg。我的图像被简单地称为1,2,3,...。.jpg。
但是,由于Yeoman使用咕噜咕噜的使用。它将我的图像文件重命名为: 7f181706.3.jpg
.因此,我的脚本无法再找到正确的图像。有没有办法解决这个问题?
我正在查看文档,发现如下所示:
assetsDir: 'images',
patterns: {
js: [[/(image'.png)/, 'Replacing reference to image.jpg']]
}
这是一种选择吗?我试过了,没有运气。不确定正确的模式是什么。
您可以在此库的测试文件中提供更好的代码示例,具体如下: https://github.com/yeoman/grunt-usemin/blob/master/test/test-usemin.js#L233
您可以在其中找到以下代码:
it('should allow for additional replacement patterns', function () {
grunt.file.mkdir('images');
grunt.file.write('images/image.2132.png', 'foo');
grunt.log.muted = true;
grunt.config.init();
grunt.config('usemin', {
js: 'misc.js',
options: {
assetsDirs: 'images',
patterns: {
js: [
[/referenceToImage = '([^'']+)'/, 'Replacing image']
]
}
}
});
grunt.file.copy(path.join(__dirname, 'fixtures/misc.js'), 'misc.js');
grunt.task.run('usemin');
grunt.task.start();
var changed = grunt.file.read('misc.js');
// Check replace has performed its duty
assert.ok(changed.match(/referenceToImage = 'image'.2132'.png'/));
});
我希望这有所帮助!
相关文章:
- 复制图像路径以单击它
- 如何使用jquery将base64图像路径转换为真实路径
- 如何设置SVG路径的样式以拍摄图像
- 滚动页面时的弯曲图像路径
- 如何使用php和javascript获取网页中显示图像的路径
- javascript onclick获取不带路径的图像名称
- Gulp bower图像路径
- Symfony2-Javascript文件中的图像路径
- 在移动设备上按路径或名称获取二进制图像(Ionic / Ng cordova 应用程序)
- 图像J宏路径问题
- 使用 jQuery 从 HTML 中的多个图像元素中删除文件路径
- 使用javascript从磁盘中的文件夹中选择所有图像的路径
- 将图像内容而非图像路径存储在mongodb中
- MVC5 和 Javascript 相对图像路径混淆
- 简单的图像滑块Javascript图像路径在IE 6中不起作用
- 从表单中派生要使用javascript对象加载的图像路径
- 将完整路径图像获取到输入文件中
- 使用Laravel中的Ajax保存路径图像
- 在智能手机上本地存储文件路径/图像,稍后上传
- 在iOS编程中将Base64图像转换为文件路径图像