Grunt: how to concat a .CSS file onto my compiled .SCSS files?

Question

I'm learning grunt and it's wonderful!

background:

My project is built using SASS (.scss), and I use grunt's compass plugin to compile multiple .scss into a single .CSS on output.

problem:

I am using a jQuery plugin which has a .css file associated with it. I want my Grunt to do as follows:

1. Compile *.SCSS into frontend.css
2. when done, concat plugin.css onto the end of frontend.css
3. minify frontend.css.

I have tried adding a concat rule for my CSS, which runs after the grunt compass compiling. The concat rule is shown below.

concat: {
  css: {
    src: ['www/assets/css/frontend.css',
          'bower_components/bootstrap-datepicker/css/plugin.css'],
    dest: 'www/assets/css/frontend.css'
  }    
}

Here is what the grunt task looks like:

  grunt.registerTask('default', ['newer:concat:vendors', 'copy', 'uglify', 'compass:dist', 'newer:concat:css', 'newer:cssmin', 'newer:imagemin']);

Here are a list of the Grunt plugins I am using:

 // Load Grunt Tasks 
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-contrib-copy');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 grunt.loadNpmTasks('grunt-newer');

if I call concat:css, plugin.css is concatenated, however each time I run the task it is added on again, again, and again, so multiple copies of the same CSS are being inserted into the file.

if I call newer:concat:css, the file is not ever concatenated onto frontend.css.

Any help much appreciated!

Answer 1

The easiest solution would be to use grunt-contrib-clean, which can simply delete the file on every build:

clean: {
    css: ['www/assets/css/frontend.css']
}

Or without installing a plugin:

grunt.registerTask('clean:css', function () {
    grunt.file.delete('www/assets/css/frontend.css');
});