grunt-autoprefixer loops endlessly when using grunt-contrib-watch

Question

I'm just learning Grunt. I'm going to use compass for vertical rhythm and image sprite generation and autoprefixer for prefixing css3 styles.

Here's my Gruntfile.js.

module.exports = function(grunt) {
  var globalConfig = {
    sassDir: 'sass',
    cssDir: 'css'
  };

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  // Project configuration.
  grunt.initConfig({
    globalConfig: globalConfig,
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      dev: {
        options: {
          sassDir: '<%= globalConfig.sassDir %>',
          cssDir: '<%= globalConfig.cssDir %>'
        }
      }
    },
    autoprefixer: {
      dev: {
        options: {
          browsers: ['last 2 versions']
        },
        src: '<%= globalConfig.cssDir %>/style.css',
        dest: '<%= globalConfig.cssDir %>/style.css'
      }
    },
    watch: {
      compass: {
        files: ['<%= globalConfig.sassDir %>/**/*.scss'],
        tasks: ['compass:dev'],
      },
      autoprefixer: {
        files: ['<%= globalConfig.cssDir %>/style.css'],
        tasks: ['autoprefixer:dev']
      },
      livereload: {
        options: { livereload: true },
        files: ['<%= globalConfig.cssDir %>/style.css']
      }
    }
  });

  // Default task(s) that will be run by invoking 'grunt' w/o args
  grunt.registerTask('styles:dev', ['compass', 'autoprefixer']);
  grunt.registerTask('default', ['styles:dev', 'watch']);
};

But whenever i run

grunt

Everything works as expected except that grunt-contrib-watch calls grunt-autoprefixer endlessly.

I'm just beginning to learn Grunt. It's probably a wrong configuration on my Gruntfile.js

I hope you could help me out here.

Ben Ben · Accepted Answer · 2013-09-08T11:25:50

Change your task configuration to:

watch: {
  compass: {
    files: ['<%= globalConfig.sassDir %>/**/*.scss'],
    tasks: ['compass:dev', 'autoprefixer:dev']
  },
  livereload: {
    options: { livereload: true },
    files: ['<%= globalConfig.cssDir %>/style.css']
  }
}

Basically, grunt-contrib-watch will run tasks whenever a file is updated, and because your source and destination files are the same it turns it into an infinite loop. Simply run the autoprefixing once your compass task has built your css. Hope this helps. :-)

grunt-autoprefixer loops endlessly when using grunt-contrib-watch

1 Answers