Looping grunt-watch with new version of autoprefixer - gruntjs

Question

Up until recently I've been using a similar gruntfile to this with success. However in my latest project grunt watch is looping continually - sometimes 4 times, sometimes 15 times or so before stopping - I can't figure out how to change the gruntfile to get it working properly again.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Define our source and build folders
js_path: 'public_html/js',
img_path: 'public_html/img',
css_path: 'public_html/css',
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '<%= img_path %>/',
src: ['*.{png,jpg,gif}'],
dest: '<%= img_path %>/'
}]
}
},
concat: {
dist: {
src: [
'<%= js_path %>/jquery-ui.js',
'<%= js_path %>/plugin_royal_slider.js',
'<%= js_path %>/plugins.js',
'<%= js_path %>/plugin_selectboxit.js',
'<%= js_path %>/plugin_picturefill.js',
'<%= js_path %>/plugin_jquery_placeholder.js',
'<%= js_path %>/plugin_pickadate.js',
'<%= js_path %>/script.js'
],
dest: '<%= js_path %>/output.js',
nonull: true
}
},
jshint: {
beforeconcat: [
'<%= js_path %>/jquery-ui.js',
'<%= js_path %>/plugin_royal_slider.js',
'<%= js_path %>/plugins.js',
'<%= js_path %>/plugin_selectboxit.js',
'<%= js_path %>/plugin_picturefill.js',
'<%= js_path %>/plugin_jquery_placeholder.js',
'<%= js_path %>/plugin_pickadate.js',
'<%= js_path %>/script.js'],
afterconcat: ['<%= js_path %>/output.js'
],
options: {
sub: true,
"-W004": true,
"-W041": true,
"-W093": true,
"-W032": true,
"-W099": true,
"-W033": true,
"-W030": true,
ignores: ['<%= js_path %>/jquery-ui.js']
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy H:M:s") %> */\n',
mangle: true,
compress: {drop_console: true} // true supresses console.log output: https://github.com/gruntjs/grunt-contrib-uglify#turn-off-console-warnings
},
dist: {
files: {
'<%= js_path %>/js.min.js': ['<%= js_path %>/output.js']
}
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: 'last 2 versions'}),
require('csswring')
]
},
dist: {
src: '<%= css_path %>/*.css'
}
},
watch: {
options: {nospawn: true},
scripts: {
files: ['<%= js_path %>/*.js'],
tasks: ['build']
},
css: {
files: ['<%= css_path %>/*.css'],
tasks: ['build']
},
grunt: {
files: ['Gruntfile.js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('build', ['jshint', 'concat', 'uglify', 'postcss']); // run manually with grunt build or run grunt watch - ctrl c to exit
grunt.registerTask('optimg', ['imagemin']); // run with grunt optimg
grunt.event.on('watch', function (action, filepath) {
grunt.log.writeln(filepath + ' has ' + action);
});
};
Current dependencies:
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-imagemin": "~0.9.4",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-uglify": "~0.9.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-postcss": "~0.6.0",
"csswring": "~4.0.0",
"autoprefixer-core": "~6.0.1",
"autoprefixer": "~6.0.3"

Answer 1

your issue is that concat generates its file into your js_path directory, and watch monitors all js files in that directory. So what happens is:
you modify a js source file
watch detects your modification and launches concat
concat generates output.js
watch detects output.js and launches concat
3 then 4 repeat - until you're saved by watch buffering (which prevents triggering too quickly in sequence)
To solve it, you have to remove the concat output from the watchlist.
What I recommend is to have concat output to a build directory outside your sources - it's best practice to separate build artefacts from source elements anyway. Define a build_path config variable and use it in your concat target.
If you really can't do that for a good reason, manually remove output.js from the watch with a negative directive (http://gruntjs.com/configuring-tasks#globbing-patterns):
watch: {
scripts: {
files: ['<%= js_path %>/*.js', '!<%= js_path %>/output.js'],
tasks: ['build']
},
}

Answer 2

Moving the postcss to a separate task has solved the problem for me.
Here are the changes to the gruntfile:
watch: {
options: {nospawn: true},
scripts: {
files: ['<%= js_path %>/*.js'],
tasks: ['build_js']
},
css: {
files: ['<%= css_path %>/*.css'],
tasks: ['build:css']
},
grunt: {
files: ['Gruntfile.js']
}
and
grunt.registerTask('build_js', ['jshint', 'concat', 'uglify']);
grunt.registerTask('build_css', ['postcss:dist']);