4

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

Consigo faze-lo para arquivos .htlm e .css mas não .less.

Aqui o Gruntfile completo. Abaixo, um trecho da parte que acho que interessa mais:

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

O CSS contido no .less só é atualizado quando recarrego a página manualmente. Adicionei '**/*.less' e imaginei que teria o mesmo efeito para esta extensão. Alguém sabe o que pode estar errado? Sei que existe target less, mas queria entender porque o que fiz não funciona.

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

Adicionei a task less e utilizei npm install grunt-contrib-less --save-dev para instalar o plugin, mas ainda estou tendo problemas. Ao alterar o arquivo .less: o terminal atesta a alteração, mas surgem problemas de NameError e @import na pastas /grunt-contrib-less/node_modules/less/test/less, que impedem a compilação -- aparentemente justificados, por se tratar de uma pasta de testes. Obrigado pela ajuda. Alguma outra luz @luciorubeens?

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

Consegui. Apenas deletei a pasta /grunt-contrib-less/node_modules/less/test e os erros pararam de ser atestados.

Na task less o caminho dos arquivos .less não estava bem especificado. Ficou assim:

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

Abaixo os arquivos atualizados - com algumas outras funcionalidades úteis:

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

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

1
  • 4
    Poste a solução como resposta, e não como parte da pergunta.
    – Largato
    Commented 7/11/2014 às 0:12

1 Resposta 1

3

Adicione as tasks que o Grunt terá que executar após esses arquivos serem modificados.

Utilize o plugin grunt-contrib-less para converter o código less em css.

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

watch: {
   all: {
      files: ['**/*.html','**/*.less'],
      tasks: ['less'],
      options: {
          livereload: true
      }
   }
}
4
  • Ainda não consegui @luciorubeens. Editei a pergunta para refletir as alterações. Tem alguma ideia do que pode ser?
    – feliupe
    Commented 27/10/2014 às 15:22
  • Rode a tarefa individualmente, no terminal grunt less e posta aqui a saída. @feliupe Commented 28/10/2014 às 3:02
  • Certifique-se de carregar o plugin, dessa forma: loadNpmTasks('grunt-contrib-NOMEPLUGIN'), pois vc apenas registrou a tarefa server (registerTask). Veja um exemplo da configuração. @feliupe Commented 28/10/2014 às 5:36
  • Os plugins já estavam sendo carregados aqui require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);. O problema foi resolvido - veja na resposta original. Obrigado!
    – feliupe
    Commented 6/11/2014 às 23:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .