使用grunt-usemin和動態生成的圖像路徑

Question

我正在使用Yeoman Webapp生成器來構建我的靜態網站。

對於我的預加載器，我有以下片段（我正在使用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']]
}

那是一種選擇嗎？ 我沒有運氣就試過了。 不確定正確的模式是什么。

Answer 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'/));
});

我希望有所幫助！