Rename files while copying them with Grunt

grunt

A simple Grunt task to copy files from directory A to directory B and renaming them.

Introducing SASS to a plain CSS project

My task was to introduce SASS to a large project with several CSS files. After setting up grunt-compass and everything else, the next step was to convert all the CSS to SASS. Rather than doing it with bash commands, I decided to do it with Grunt.

The Grunt task

//copy all css files to sass directory, and rename to .scss
copy: {
  getSCSSFromCSS: {
    files: [
      {
        expand: true,
        cwd: 'path/to/css/',
        src: ['**/*.css'],
        dest: 'path/to/sass/',
        rename: function(dest, src) {
          return dest + src.replace(/\.css$/, ".scss");
        }
      }
    ]
  }
}

The replacing job is done by the rename function. This takes two arguments, the destination path and the src path. Note that a cwd is used, so that the the source path only includes the part from the cwd to the file being processed, i.e. the filename.

The task is then called with grunt copy:getSCSSFromCSS