[英]Using grunt-usemin with dynamically generated image paths
I'm using the Yeoman Webapp generator to build my static website. 我正在使用Yeoman Webapp生成器来构建我的静态网站。
For my preloader, I have the following snippet (I'm using requireJS for the JS, if that matters). 对于我的预加载器,我有以下片段(我正在使用requireJS作为JS,如果这很重要)。
for(var i = 1; i <= config.numSlides; i++) {
images.push(config.imageBase + i + '.jpg');
}
As you can see, I just generate a path with a number and add .jpg to it. 如您所见,我只是生成一个带数字的路径并为其添加.jpg。 My images are simply called 1, 2, 3, ... .jpg.
我的图片简称为1,2,3,... .jpg。
However, since Yeoman uses grunt-usemin.. It renames my image files to something like: 7f181706.3.jpg
. 但是,由于Yeoman使用grunt-usemin ..它将我的图像文件重命名为:
7f181706.3.jpg
。 Because of this, my script cannot find the correct image anymore. 因此,我的脚本无法再找到正确的图像。 Is there a way to solve this?
有办法解决这个问题吗?
I was looking through the docs and found something like this: 我正在查看文档并找到类似这样的内容:
assetsDir: 'images',
patterns: {
js: [[/(image\.png)/, 'Replacing reference to image.jpg']]
}
would that be an option? 那是一种选择吗? I tried it without luck.
我没有运气就试过了。 Not sure what the correct pattern would be.
不确定正确的模式是什么。
You can have a better code sample in the test files of this library, concretely: https://github.com/yeoman/grunt-usemin/blob/master/test/test-usemin.js#L233 您可以在此库的测试文件中获得更好的代码示例,具体来说: https : //github.com/yeoman/grunt-usemin/blob/master/test/test-usemin.js#L233
Where you can find the following code: 在哪里可以找到以下代码:
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'/));
});
I hope that helps! 我希望有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.