Grunt - Modify output filename

Question

I'm using grunt-image-resize (https://github.com/excellenteasy/grunt-image-resize) to, well, resize images. But my question is general to Grunt and the way we can interpolate the name of a file in a task.

The idea is to take big background images and resize them and save them in the same folder by appending something like _small, for example, in the filename. Right now, what I'm doing is:

image_resize: {

  bg: {
    options: {
      width: 640,
      quality: 0.5,
      overwrite: true
    },
    files: [{
      expand: true,
      cwd: '<%= pkg.path.images_source %>/bg',
      src: ['{,*/}*.{gif,jpeg,jpg,png}'],
      dest: '<%= pkg.path.images_source %>/bg/mobile'
    }]
  }
}

which effectively saves the treated files to a subfolder called mobile. But what I would really wanna do is something like:

dest: '<%= pkg.path.images_source %>/bg/{filename}_small.{fileextension}'

Is this possible easily with Grunt? Couldn't find anything on SO and I honestly don't know what to look for...

Thanks in advance!

UPDATE:

I could output the images in a tmp folder, then use grunt-contrib-copy to save them with a different name back in the root folder, but it's becoming really tedious I think... I'm looking for a cleaner, quicker way.

Answer 1

You can have a rename function to toy around with the destination name:

files: [{
  // ...
  rename: function(dest, src) {
    var path = require('path'),
    basename = path.basename(src),
    ext = path.extname(file),
    filename = basename.replace(ext, '');

    return path.join(dest, filename + '_small' + ext)
  }
}]