Using grunt-usemin with dynamically generated image paths

Question

I'm using the Yeoman Webapp generator to build my static website.

For my preloader, I have the following snippet (I'm using requireJS for the JS, if that matters).

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. My images are simply called 1, 2, 3, ... .jpg.

However, since Yeoman uses grunt-usemin.. It renames my image files to something like: 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.

Answer 1

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

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!