how to config grunt.js to minify files separately

Question

there are some js files in static/js/

    1. a.js
    2. b.js
    3. c.js   

how to config grunt.js to get below files:

    1. a.min.js
    2. b.min.js
    3. c.min.js

as far, I have to type specific file name:

  min: {
    dist: {
    src:  'js/**/*.js',
    dest: 'js/min/xxx.min.js'
   }
 }

Answer 1

In grunt 0.4 you can specify multiple dest/src pairs like this:

uglify: {
    dist: {
        files: {
            'dist/main.js': 'src/main.js',
            'dist/widget.js': 'src/widget.js'
        }
    }
}

Answer 2

From the grunt docs for min:

This task is a multi task, meaning that grunt will automatically iterate over all min targets if a target is not specified.

So you can do this:

  min: {
    min_a: {
       src:  'a.js',
       dest: 'a.min.js'
    },
    min_b: {
       src:  'b.js',
       dest: 'b.min.js'
    },
    min_c: {
       src:  'c.js',
       dest: 'c.min.js'
 }

There's nothing special about the name 'dist' for these tasks.

Answer 3

You also can use copy and grunt-mindirect.

copy: {
  dist: {
    src: 'a.js',
    dest: 'a.min.js'
  }
},
minidirect: {
  all: 'js/min/*.min.js'
}

This should work.

Answer 4

I guess it only matters for watch tasks.

In grunt 0.4 you can do this

  var filesA = 'a.js', filesB = 'b.js', filesC = 'c.js';

  ...

  min: {
      min_a: {
         src:  filesA,
         dest: 'a.min.js'
      },
      min_b: {
         src:  filesB,
         dest: 'b.min.js'
      },
      min_c: {
         src:  filesC,
         dest: 'c.min.js'
  }

  watch: {
      min_a: {
         files:  filesA,
         tasks: ['min:min_a']
      },
      min_b: {
         files:  filesB,
         tasks: ['min:min_b']
      },
      min_c: {
         files:  filesC,
         tasks: ['min:min_c']
      }
  }

After that just start grunt watch and all will be fine automagically.

Answer 5

Or you can use expandMapping, like this:

min: {
    files: grunt.file.expandMapping(['path/*.js', 'path2/*.js'], 'destination/', {
        rename: function(destBase, destPath) {
            return destBase+destPath.replace('.js', '.min.js');
        }
    })
}

And the output:

path/test.js => destination/path/test.min.js
path2/foo.js => destination/path2/foo.min.js

Answer 6

Use the ext option to name the files .min.js instead of .js

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts',
            ext: '.min.js'
        }]
      }
    }