How to livereload using Grunt for . Less files?

Question

A SOLUÇÃO ESTÁ NA TERCEIRA PARTE JUNTO COM OS ARQUIVOS.

I can do it for . htlm and . css files but not . Less.

Here the full Gruntfile. Below, a snippet of the part I think matters most:

watch: {
    all: {
            files: ['**/*.html','**/*.less'],
            options: {
                livereload: true
        }
    }
},

The CSS contained in . Less is only updated when I reload the page manually. I added '**/*.less' and I figured it would have the same effect for this extension. Does anyone know what might be wrong? I know there is one target But I wanted to understand why what I did didn’t work.

============

I added the task less and used npm install grunt-contrib-less --save-dev to install the plugin, but I’m still having problems. When changing the file . Less: the terminal attests to the change, but problems arise from NameError and @import in the folders /grunt-contrib-less/node_modules/less/test/less, that prevent the compilation -- apparently justified, because it is a test folder. Thanks for the help. Some other light @luciorubeens?

============

I got it. I just deleted the folder /grunt-contrib-less/node_modules/less/test and the errors stopped being attested.

In the task less the path of the archives .less was not well specified. It was like this:

less: {
    development: {
       options: { compress: true },
       files: { 'saida.css': '/pastaOndeEstãoOsArquivos/*.less' }
    }
},

Below the updated files - with some other useful features:

Gruntfile: https://gist.github.com/feliupe/309cc7adf28adefb682c

package: https://gist.github.com/feliupe/91010be2a1d085af64ca

Answer 1

Add the tasks that Grunt will have to run after these files are modified.

Use the plugin Grunt-contrib-Less to convert the code less in css.

less: {
    development: {
       options: { compress: true},
       files: { 'saida.css': '**/*.less' }
    }
},

watch: {
   all: {
      files: ['**/*.html','**/*.less'],
      tasks: ['less'],
      options: {
          livereload: true
      }
   }
}