grunt sass: compile only changed files

Question

I have the following folder structure:

+ web
  + component
    - component.js
    - component.scss
    - component.css
  + another
    - another.js
    - another.scss
    - another.css

As you can see I compile every css into his component folder.

This is my configuration:

grunt.initConfig({ 
    sass: {
        dist: {
            files: [{
            expand: true,
            cwd: './',
            src: ['web/**/*.scss'],
            dest: './',
            ext: '.css'
            }]
        }
    },
    watch: {
        files: ["web/**/*.scss"],
        tasks: ['sass'],
        options : { spawn: false }
    }
});

Everything works fine, but the problem is that every time a scss file is changed, it compiles ALL the scss in my web folder.

I want to compile only the changed scss.

I also tried installing grunt-newer and changing the watch configuration in:

watch: {
    files: ["web/**/*.scss"],
    tasks: ['newer:sass'],
    options : { spawn: false }
}

But it doesn't compile anything now.

ps: I would like to avoid mapping every single file in the sass configuration (scss -> css) since the rule is the same for all the files (same name, same folder), and because I have tons of them.

pumpkinzzz pumpkinzzz · Accepted Answer · 2018-03-14T10:44:01

ok, i was close.. i'll post the answer as well, it may help someone.

i had to remove options : { spawn: false }, so my config file now is like this:

grunt.initConfig({ 
    sass: {
        dist: {
            files: [{
            expand: true,
            cwd: './',
            src: ['web/**/*.scss'],
            dest: './',
            ext: '.css'
            }]
        }
    },
    watch: {
        files: ["web/**/*.scss"],
        tasks: ['newer:sass']
    }
});

grunt sass: compile only changed files

1 Answers