0

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!

tdc
  • 5,174
  • 12
  • 53
  • 102
  • Why not just copy `plugin.css` into a new `plugin.scss` file? That is typically what I do. – Steve Sanders Jun 16 '14 at 21:34
  • @sdsanders He is installing the css with bower, so he probably can't rename it permanently. – jgillich Jun 16 '14 at 21:47
  • @sdsanders, like jgillich pointed out I'm using bower so I'd prefer not to do that. :) Thanks for the suggestion though. – tdc Jun 16 '14 at 21:48
  • @Prefix Another way to fix this with Grunt is outlined [here](https://github.com/sass/sass/issues/556#issuecomment-15718564). – patrick Dec 30 '14 at 08:12

1 Answers1

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');
});
jgillich
  • 71,459
  • 6
  • 57
  • 85