0

I've just started using grunt and cssmin for automating the CSS minification process. This works fine at the very first time, however later on the file content gets appended to the minified file instead of overwriting it, and its duplicated, file size goes high and high!!

My gruntfile.js file content as follows.

module.exports = function (grunt) {
    grunt.initConfig({

    // define source files and their destinations
    cssmin: {
        target: {
            files: [{ 
                src: ['assets/front/css/*.css', '!*.min.css'],  // source files mask
                dest: 'assets/front/css/',    // destination folder
                expand: true,    // allow dynamic building
                flatten: true,   // remove all unnecessary nesting
                ext: '.min.css'   // replace .css to .min.css
            }],
        }
    },
    watch: {
        css:  { files: 'assets/front/css/*.css', tasks: [ 'cssmin' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');

// register at least this one task
grunt.registerTask('default', [ 'cssmin', 'watch' ]);


};

Please advise, where am I making mistake.

Vaishak
  • 462
  • 2
  • 6
  • 17

1 Answers1

1

I believe this issue on GitHub is related, in which two solutions were discussed:

1) Use clean before minifying:

   clean: ['your_path/css/*.min.css', '!your_path/css/*.css'],
   cssmin: {
      minify: {
        expand: true,
        cwd: 'your_path/css/',
        src: ['*.css'],
        dest: 'your_path/css/',
        ext: '.min.css'
      }
    }

2) Use absolute file paths and not */**.css paths, as such:

cssmin: {
  combine: {
    files: {
      'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']
    }
  }
}
  • Thanks. Using absolute file paths and is not practical as I have many css files inside the directory. I'm not looking to combine, just want to minify each file separately. Any advise? – Vaishak Jan 20 '16 at 05:18
  • In that case, have you tried using clean? I updated my initial post. The author of this package said to be wary of using * selector on files as for some reason it reuses the same files and doesn't overwrite. –  Jan 20 '16 at 05:37
  • 1
    I haven't used clean, however this is working fine now. The issue was with the path I mentioned! `'!*.min.css'` instead of `'!assets/front/css/*.min.css'` – Vaishak Jan 20 '16 at 07:28