将 grunt-usemin 与动态生成的图像路径一起使用答案

【问题标题】：Using grunt-usemin with dynamically generated image paths将 grunt-usemin 与动态生成的图像路径一起使用
【发布时间】：2013-11-06 09:11:26
【问题描述】：

我正在使用 Yeoman Webapp 生成器来构建我的静态网站。

对于我的预加载器，我有以下 sn-p（如果重要的话，我将 requireJS 用于 JS）。

for(var i = 1; i <= config.numSlides; i++) {
  images.push(config.imageBase + i + '.jpg');
}

如您所见，我只是生成了一个带有数字的路径并将 .jpg 添加到其中。我的图片简称为 1, 2, 3, ... .jpg。

但是，由于 Yeoman 使用 grunt-usemin.. 它将我的图像文件重命名为：7f181706.3.jpg。因此，我的脚本再也找不到正确的图像了。有没有办法解决这个问题？

我浏览了文档，发现了这样的内容：

assetsDir: 'images',
patterns: {
    js: [[/(image\.png)/, 'Replacing reference to image.jpg']]
}

这会是一个选择吗？我没有运气就试过了。不确定正确的模式是什么。

【问题讨论】：

标签： javascript gruntjs yeoman yeoman-generator grunt-usemin

【解决方案1】：

你可以在这个库的测试文件中有更好的代码示例，具体是：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'/));
});

希望对你有帮助！

【讨论】：