Grunt Compass for multiple SASS files for different sites

Question

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 -

• _reset
• _grid
• _layout
• _variables
• _mixins
• _brand1
• _brand2
• _brand3
• _summer
• _winter
• _site_1_specific
• _site_2_specific
• _site_3_specific
• _site_4_specific
• _site_5_specific
• _site_6_specific
• _site_7_specific
• _site_7_specific
• _site_9_specific
• _site_10_specific
• _site_11_specific

I then have 11 SCSS files importing a combination of the above partials to make the final style sheets.

Answer 1

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.