node.jsgruntjsnpmgrunt-contrib-cssmin

cssmin and grunt - file append issue


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.


Solution

  • 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']
        }
      }
    }