Grunt com watch e sass | Grunt: Automação de tarefas front-end

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Lucas Augusto

| 126.2k xp | 29 posts

Front End Developer

pessoal estou tentato converter sass em css pelo watch junto com sass, mas não estou conseguindo

quando eu dou o comando grunt sass converter normalmente mas quando eu vou fazer um grunt watch o mesmo fica vigiado mas não acontecer nada

aqui esta meu código que estou colocando

module.exports = function(grunt){
    grunt.initConfig({
        sass: {
            dist: {
              files: [{
                expand: true,
                cwd: 'public/assets/sass',
                src: ['*.{scss,sass}'],
                dest: 'public/assets/css',
                ext: '.css'
              }]
            }
          },
        watch: {
            sass:{
                files: ['**/*.scss'],
                tasks: ['sass'],
                options:{
                    event: ['added', 'changes']
                }
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-sass");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ['watch']);
};

me ajudem por favor!

2 respostas

solução!

por Fabrício Francisco Mendes da Silva

| 436.4k xp | 40 posts

Front-end Developer

16/12/2015

Olá, Lucas.

Acredito que o erro esteja aqui:

src: ['.{scss,sass}'],

O correto é passar cada parâmetro como um elemento do Array:

src: ['*.scss', '*.sass'],

Também existem alguns erros no seu watch:

watch: {
  sass:{
    files: ['**/.scss'],
    tasks: ['sass'],
    options:{
      event: ['added', 'changes']
    }
  }
}

Em files, faltou o *.:

files: ['**/*.scss'],

Em options, errou no changed:

event: ['added', 'changes']

Ficando o arquivo final corrigido:

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      dist: {
        files: [{
          expand: true,
          cwd: './public/assets/sass',
          src: ['*.scss', '*.sass'],
          dest: 'public/assets/css',
          ext: '.css',
        }]
      }
    },

    watch: {
      sass: {
        files: ['**/*.scss'],
        tasks: ['sass'],
        options: {
          event: ['added', 'changed'],
        },
      }
    },
  });

  grunt.registerTask("default", ['watch']);

  grunt.loadNpmTasks("grunt-contrib-sass");
  grunt.loadNpmTasks("grunt-contrib-watch");

};

Espero ter ajudado!

por Lucas Augusto

| 126.2k xp | 29 posts

Front End Developer

17/12/2015

ajudou e muito

muito obrigado