I have lots of different partials and sass files to generate 11 individual website specific style sheets so if I make a changes in a partial that is being used in all 11 style sheets then I have to wait for grunt to compile all these before I can refresh my browser and see the change, one workaround I have is to use the specify option and change the site ID depending on which site I am working on -
compass: {
dev: {
options: {
sassDir: "assets/sass",
specify: "assets/sass/site_##.scss",
cssDir: "assets/styles",
outputStyle: "expanded",
noLineComments: false,
sourcemap: true
}
}
},
watch: {
css: {
files: 'assets/sass/**/*',
tasks: 'compass',
},
},
Is there a way I could make this dynamic in the watch task, i.e. using an ID appended to the body or something?
My partials -
I then have 11 SCSS files importing a combination of the above partials to make the final style sheets.
You can use grunt-newer
, that helps you to execute the compass task only in the file that is changed:
https://github.com/tschaub/grunt-newer
npm install grunt-newer --save-dev
grunt.loadNpmTasks('grunt-newer');
Then, you have to change your watch
task:
watch: {
css: {
files: '<%= tui.sass %>/**/*',
tasks: ['newer:compass']
},
},
Hope it helps.
Regards.