CODEWITHSUNDEEP
javascriptgruntjssails.js
twharmon
twharmon

Reputation: 4272

Can Grunt minify multiple files separately, without concatenating them?

I have a Sailsjs project, and it comes with Grunt built in. Here is what tasks/register/prod.js looks like:

module.exports = function(grunt) {
  grunt.registerTask('prod', [
    'compileAssets',
    //'concat',
    'uglify',
    'cssmin',
    'sails-linker:prodJs',
    'sails-linker:prodStyles',
    //'sails-linker:devTpl',
    //'sails-linker:prodJsJade',
    //'sails-linker:prodStylesJade',
    //'sails-linker:devTplJade'
  ]);
};

and here is my attempt to get Grunt to minify files separately tasks/config/cssmin.js:

module.exports = function(grunt) {

  grunt.config.set('cssmin', {
    dist: {
      src: 'assets/css/test.css',
      dest: '.tmp/public/min/test.min.css'
    }
  });

  grunt.config.set('cssmin', {
    dist: {
      src: 'assets/css/main.css',
      dest: '.tmp/public/min/main.min.css'
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

This doesn't work correctly, it only gives me main.min.css (minified) but not test.min.css.

Upvotes: 3

Views: 658

Answers (2)

Dylan Stark
Dylan Stark

Reputation: 2395

The second time you set the value for the cssmin task you are overwriting your previous value, thus you are only returned main.min.css.

To minify multiple separate files with cssmin you would only set grunt.config once and it would look like this:

module.exports = function(grunt) {

  grunt.config.set('cssmin', {

    dist: {
      src: 'assets/css/test.css',
      dest: '.tmp/public/min/test.min.css'
    },

    dist2: {
      src: 'assets/css/main.css',
      dest: '.tmp/public/min/main.min.css'
    }

  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Upvotes: 3

JJJ
JJJ

Reputation: 33163

"dist" is not a static part of the syntax, it's the name of the target. You can have as many targets as you want, but you can't have two with the same name.

grunt.config.set('cssmin', {
  test: {
    src: 'assets/css/test.css',
    dest: '.tmp/public/min/test.min.css'
  },
  main: {
    src: 'assets/css/main.css',
    dest: '.tmp/public/min/main.min.css'
  }
});

Running "cssmin" executes both targets, "cssmin:test" runs the first one and "cssmin:main" runs the second.

Upvotes: 5

Related Questions