CODEWITHSUNDEEP
gruntjsgrunt-contrib-watchgrunt-contrib-compass
Dan Mitchell
Dan Mitchell

Reputation: 864

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.

Upvotes: 0

Views: 563

Answers (1)

Mario Araque
Mario Araque

Reputation: 4572

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.

Upvotes: 1

Related Questions