Erro ao utilizar o browser-sync e watch

Seu código não usou formatação para que possamos entender.

Da uma olhadinha nas dicas de formatação. Lá ensina como formatar.

Feito isso não apenas eu mas outras pessoas poderão te ajudar .

Aguardo a formatação.

Oi Lucas, ainda no aguardo :)

module.exports = function(grunt){
    grunt.initConfig({
        copy:{
            public: { 
                    expand: true, 
                    cwd: 'public', 
                    src: '', 
                    dest: 'dist' 
            }
         },
         clean:{
dist: {
    src: 'dist'
    }
}, 
sass: {
    dist:{
        options:{
            style: 'compressed',
            sourcemap: 'none'
        }, 
        files: [{
            expand: true,
             cwd: 'public/assets/sass', 
            src: ['.scss', '.sass'], 
            dest: 'public/assets/css', ext: '.css'
        }]
     }
},
less: {
    compilar: {
        expand: true, 
        cwd: 'public/assets/less',
        src: ['/.less'], 
        dest: 'public/assets/less-css', ext: '.css'
    }
},
watch: {
    less: {
        options: {
            event: ['added', 'changed'] 
        },
        files: 'public/assets/less/**/.less', 
        tasks: 'less:compilar' 
    }, 
    sass: {
        options:{
            event: ['added', 'changed'] 
        },
         files: 'public/assets/**/*.scss',
        tasks: ['sass'] 
    }
}, 
browserSync:{ 
    public: { 
        bsFiles: {
            watchTask: true,
            src: ['public/**/*']
         },
         options: {
        server: {
            baseDir: 'public' }
        }
     }
 }
 });
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.loadNpmTasks("grunt-contrib-sass");
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-imagemin");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-browser-sync");

    grunt.registerTask("server", ['browserSync']);
    grunt.registerTask("dist", ['clean', 'copy']);
    grunt.registerTask("compilar", ['watch']);

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

Você está usando arquivos .scss ou .sass? Veja que sua tarefa do watch só considera arquivo .scss.

como eu faço para considera as duas extensões?

 files: [ 'public/assets/**/*.scss', 'public/assets/**/*.sass']

Mas era esse o problema? Você estava criando o arquivo .sass?

não mesmo com as extensão .scss não estava convertendo para css

Tem outra coisa tmb utilizando o browser sync o watch não esta funcionando ele não converter o sass para css, para converter eu tenho que utilizar dois terminais ao mesmo tempo para fazer o server com o browser sync e outro para utilizar o watch

era para ser assim mesmo ou não?

Não é para ser assim. É o watchTask: true que resolve o problemaaaaaaaaaaaa.... peraíiiiiiiiii achei o problema......

Seu arquivo está assim:

browserSync:{ 
    public: { 
        bsFiles: {
            watchTask: true,
            src: ['public/**/*']
         },
         options: {
        server: {
            baseDir: 'public' }
        }
     }
 }

Você usou a propriedade watchTask: true em bsFiles! É em options! De nada valeu essa configuração lá :)

Eu precisa tirar a opção wachTaks de bsFiles e coloca em options ou tirar de tudo e assim vai funcionar os dois ao mesmo tempo?

Eu precisa tirar a opção watchTaks de bsFiles e coloca em options ou tirar de tudo e assim vai funcionar os dois ao mesmo tempo?

Oi Lucas, faz igualzinho ao que você aprendeu no treinamento: quem tem que ter a opção watchTask é options e não bsFiles. Tira de um e coloca em outro:

browserSync:{ 
    public: { 
        bsFiles: {
            src: ['public/**/*']
         },
         options: {
            watchTask: true,
            server: {
                baseDir: 'public' }
            }
        }
 }

Sugiro até rever essa parte do treinamento lá, inclusive faço essa configuração no capítulo do browserSync.

Inclusive, vi também que você não configurou corretamente a task server com o que é ensinado no capítulo do browserSync. Eu sugiro que você dê uma estudada novamente nele, combinado? Só para você entender com mais clareza onde está errando.

Lá no capítulo, eu digo que a task browserSync e watch

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

O browserSync tem que rodar primeiro e só depois a task watch. Por isso essa ordem. Quando você rodar a task server ele rodará o browserSync e o watch que devem rodar simultaneamente.

Não vi isso no seu arquivo.

agora eu conseguir, eu deu uma olhada na video aula do browser sync e lá você mostrar a opção do watchTask no bsFile e não em options teria que rever essa aula para atualizar a mesma.

Mas muito obrigado meu problema foi resolvido com sua ajudar :) !!!

Opaaa! É mesmo! Na explicação eu faço certinho, mas no vídeo eu coloco a propriedade no lugar indevido!

Vou pedir para adicionar uma tarja pedindo correção, caramba, valeu Lucas!

Mas faça um teste, agora que está funcionando, volte o watchTask para dentro de bsFiles e veja se funciona. Se funcionar, a propriedade pode ficar nos dois lugares e eu nem sabia!

no caso não somente na opção options e quer funcionou

Em páginas .PHP ele não funciona... Aparece: Cannot GET /

Johson tem que usar um outro plugin pra fazer funciona as páginas php pois o browsersync só funciona com páginas estáticas

Qual recomendaria ?

Utilizar esse link como referência https://fettblog.eu/php-browsersync-grunt-gulp/