Can you get LESS files to LiveReload with Grunt in Eclipse? - eclipse

Question

I use MAMP/Grunt/SublimeText/LESS/LiveReload at home, which works perfectly in Chrome. Instant reloads everytime I save any designated file.
But at work, I'm working in Eclipse with files and a jetty server. Now, for some reason, when I save a 'watched' file, all the LESS is compiled and minified, and the local server refreshes itself in the browser, but it takes 20-30 seconds (and another page reload) to get a simple CSS change to implement.
Here's my gruntfile. Any ideas on how I could get changes to render more quickly?
module.exports = function(grunt) {
grunt.initConfig({
project: {
name: 'web-standard',
version: grunt.option('pomVersion') || 'VERSION',
},
/* CSS */
less: {
build: {
files: [
{
expand: true,
flatten: true,
src: 'src/main/less/*.less',
dest: 'target/css',
ext: '.css'
}
]
}
},
autoprefixer: {
build: {
options: {
browsers: ['last 2 versions']
},
expand:true,
flatten:true,
src: 'target/css/*.css',
dest: 'target/css/'
}
},
cssmin: {
minify: {
options: {
banner: '<%= project.copyright %>'
},
expand: true,
cwd: 'target/css/',
src: '*.css',
dest: 'target/css-min/',
ext: '.min.css'
}
},
/* Utilities */
watch: {
less: {
options: {
livereload:true,
spawn: false
},
files: ['src/main/less/*.less','target/css-min/*.css','Gruntfile.js'],
tasks: ['less', 'autoprefixer','cssmin']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('dev-css', ['less','autoprefixer','cssmin','watch:less']);
};

Answer 1

The files array of your watch task should not contain the 'target/css-min/*.css' and 'Gruntfile.js'. Most important to remove the'target/css-min/*.css'`
Also the 'autoprefixer' ask 'cssmin' are not necessary for development.
Note that changing the less files triggers the less task, which change the 'target/css-min/*.css' again which triggers the reload, also the autoprefixer will change the 'target/css-min/*.css' files again.
Try:
watch: {
less: {
options: {
livereload:true,
spawn: false
},
files: ['src/main/less/*.less'],
tasks: ['less']
}
}