How to do livereload using Grunt for .less files?

Question

How to do livereload using Grunt for .less files?

Navigation

#1 by (3 votes)

4

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 complete Gruntfile. Below is an excerpt from the part that I think is of interest:

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

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

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

I added the task less and I used npm install grunt-contrib-less --save-dev to install the plugin, but I'm still having problems. When changing the .less file: the terminal attests the change, but problems with NameError and @import appear in the /grunt-contrib-less/node_modules/less/test/less folders, which prevent compilation - apparently justified because it is a test folder. Thank you for your help. Any other light @luciorubeens?

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

I have. I just deleted the /grunt-contrib-less/node_modules/less/test folder and the errors stopped being overwritten.

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

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

Below the updated files - with some other useful features:

Gruntfile: link

package: link

less grunt

asked by anonymous 26.10.2014 / 01:36

1 answer

Managing Dependencies with Maven in an Offline Environment How to change the font color of a JTextArea?

score 3 · Accepted Answer

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

Use the grunt-contrib-less plugin to convert the code less to css .

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

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