CODEWITHSUNDEEP
cssloopscompilationgruntjsautoprefixer
Joshua Waheed
Joshua Waheed

Reputation: 277

GruntJS: Autoprefixer loops through all CSS files

Okay, so I can understand that I have set my autoprefixer to watch all CSS files within my directory, for which my problem is most likely coming from. I'm just having difficulties working out how to solve it.

This is how my watch function looks,

watch: {
    // _ watching scss files to compile as css
    sass: {
        files: [ ROOT_DIR + '_dev/_sass/**/*.scss' ],
        tasks: ['sass', 'autoprefixer']
    },
    // _ watching less files to compile as css
    less: {
        files: [ ROOT_DIR + '_dev/_less/**/*.less' ],
        tasks: ['less', 'autoprefixer']
    }
},

And this is how my autoprefixer looks,

autoprefixer: {
    multiple_files: {
        expand: true,
        flatten: true
    },
    no_dest: {
        src:
        [
            ROOT_DIR + '**/*.css',
            '!' + ROOT_DIR + '_dev/**/*.css',
            '!' + ROOT_DIR + 'fc-js/**/*.css'
        ]
    },
    sourcemap: {
        options: {
            map: true
        },
        src:
        [
            ROOT_DIR + '**/*.css',
            '!' + ROOT_DIR + '_dev/**/*.css',
            '!' + ROOT_DIR + 'fc-js/**/*.css'
        ]
    }
},

Which works when in the command prompt I type, grunt autoprefixer or grunt watch

The problem arises when I type grunt watch. When I save an .scss file, it compiles as .css then begins autoprefixing, but the autoprefixer loops through and autoprefixes all css. This is making production really time consuming for me.

Is there anything that can allow only the css file that changed to autoprefix while grunt is still able to watch all the other .css files?

Upvotes: 0

Views: 305

Answers (1)

nunoarruda
nunoarruda

Reputation: 2904

Use https://www.npmjs.org/package/grunt-newer. It runs Grunt tasks with only those source files modified since the last successful run.

Upvotes: 2

Related Questions