gruntjsgrunt-contrib-watchgrunt-contrib-compass

Grunt Compass for multiple SASS files for different sites


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.


Solution

  • 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.