Watch Grunt para Less y Sass

Para hacer un watch y trabajar con less usaremos node y grunt.

Los dos archivos que necesitaremos para este watch y compilador para less serán:

package.json

{
  "name": "less_sass",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-less": "~0.11.0",
    "grunt-contrib-sass": "~0.7.3",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-copy": "~0.5.0",
    "matchdep": "~0.3.0"
  }
}

Gruntfile.js

module.exports = function (grunt) {
//load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),
copy:{
main: {
expand: true,
cwd: 'src/',
src: ["**", "!css/**/*.less", "!css/**/*.scss"],
dest: 'dist/'
}
},
less:{
option: {
paths:['src/css']
},
src:{
expand:true,
cwd: "src/css",
src: "*.less",
ext: ".css",
dest: "src/css"
}
},
sass: {
files:[{
expand:true,
cwd: "src/css",
src: "*.scss",
ext: ".css",
dest: "src/css"
}]
},
watch: {
options: {
nospawn: true,
livereload: true
},
less:{
files:['src/css/**/*.less'],
tasks: ['less']
},
sass:{
files:['src/css/**/*.scss'],
tasks: ['sass']
},
copy:{
files:['src/**'],
tasks: ['copy:main']
}
}
});
grunt.registerTask('default', ['watch']);
};

También preparado para trabajar con SASS.

Para que nuestro navegador actualice los cambios realizados por nuestro editor:
http://livereload.com/ podemos bajar los plugings necesarios.