Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Problema Grunt browserSync + WAMP

Boa noite,

Não consegui reproduzir a parte final do curso de Grunt, onde roda o comando "grunt server". O navegador abre uma aba no endereço "http://localhost:3000/" com a mensagem: Cannot GET /

Acredito que seja por causa do WAMP instalado no computador, não tenho certeza.

Procurei algumas configurações de proxy dentro do browserSync mas não funcionou. Provavelmente porque não sei utilizar corretamente.

O código do meu Gruntfile.js é:

module.exports = function(grunt) {

    grunt.initConfig({

        copy: {

            public: {
                expand: true,
                cwd: 'public',
                src: '**',
                dest: 'dist'
            }

        },

        clean: {

            dist: {
                src: 'dist'
            }

        },

        useminPrepare: {

            html: 'dist/**/*.html'
        },

        usemin: {

            html: 'dist/**/*.html'
        },

        imagemin: {

            public: {
                expand: true,
                cwd: 'dist/img',
                src: '**/*.{png,jpg,gif}',
                dest: 'dist/img'
            }

        },

        rev: {

            options: {
                encoding: 'utf8',
                algorithm: 'md5',
                length: 8
            },

            imagens: {
                src: ['dist/img/**/*.{png,jpg,gif']
            },

            minificados: {
                src: ['dist/js/**/*.min.js', 'dist/css/**/*.min.css']
            }

        },

        coffee: {

            compilar: {
                expand: true,
                cwd: 'public/coffee',
                src: ['**/*.coffee'],
                dest: 'public/js',
                ext: '.js'
            }

        },

        less: {

            compilar: {
                expand: true,
                cwd: 'public/less',
                src: ['**/*.less'],
                dest: 'public/css',
                ext: '.css'
            }

        },

        watch: {

            coffee: {

                options: {
                    event: ['added', 'changed']
                },

                files: 'public/coffee/**/*.coffee',
                tasks: 'coffee:compilar'
            },

            less: {

                options: {
                    event: ['added', 'changed']
                },

                files: 'public/less/**/*.less',
                tasks: 'less:compilar'
            },

            js: {

                options: {
                    event: ['changed']
                },

                files: 'public/js/**/*.js',
                tasks: 'jshint:js'
            }

        },

        jshint: {

            js: {
                src: ['public/js/**/*.js']
            }

        },

        browserSync: {

            public: {

                bsFiles: {
                    src: ['public/**/*']
                },

                options: {
                    watchTask: true,
                    server: {
                        basedir: 'public'
                    }
                }

            }

        }

    });

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

    grunt.registerTask('dist', ['clean', 'copy']);

    grunt.registerTask('minifica', ['useminPrepare', 'concat', 'uglify', 'cssmin', 'rev', 'usemin', 'imagemin']);

    grunt.registerTask('default', ['dist', 'minifica']);

    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-rev');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-browser-sync');
}

Alguém sabe resolver?

Obrigado

14 respostas

A solução é através da configuração de proxy mesmo. Cole o código com sua tentativa para que todos possam ver aqui.

O código esta assim:

browserSync: {

            public: {

                proxy: 'localhost',

                bsFiles: {
                    src: ['public/**/*']
                },

                options: {
                    watchTask: true,
                    server: {
                        basedir: 'public'
                    },
                    proxy: {
                        target: 'alura-grunt',
                        port: 80
                    }
                }

            }

        }

Já tentei localhost e algumas variações.

O projeto hoje é acessado pelo wamp com o endereço local 'alura-grunt/'

Parece que faltou a porta em

proxy: 'localhost'

Use a porta do seu Server php. Se for 8080 use:

proxy: 'localhost:8080'

A porta utilizada pelo wamp é 80. Testei colocar 80 no proxy e não acontece nada. Apenas aparece no prompt e para:

Running "browserSync:public" (browserSync) task

O parâmetro proxy tem que estar dentro de options? Tentei dentro e fora e não adiantou. Existe algum problema em utilizar a porta 80? Preciso usar outra?

browserSync: {

            public: {

                proxy: 'localhost:80',

                bsFiles: {
                    src: ['public/**/*']
                },

                options: {
                    watchTask: true,
                    server: {
                        basedir: 'public'
                    },
                    proxy: 'localhost:80',
                }

            }

        }

Em desenvolvimento não usamos a porta 80, porém não acredito que esse seja o problema. Você tem firewall, anti vírus? Experimente desligar.

Você está usando as mesmas versões que eu uso?

Não tenho nenhum firewall ou anti-virus.

O meu node.js esta na versão 8.9.3. Baixei tudo direto no site de cada ferramenta, então deve ser a versão mais recente de tudo.

O restante segue abaixo:

{
  "name": "alura-grunt",
  "version": "1.0.0",
  "description": "curso grunt da alura",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-coffee": "^2.0.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-imagemin": "^2.0.1",
    "grunt-contrib-less": "^1.4.1",
    "grunt-contrib-uglify": "^3.2.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-rev": "^0.1.0",
    "grunt-usemin": "^3.1.1"
  },
  "dependencies": {
    "grunt-contrib-jshint": "^1.1.0"
  }
}

Seu problema está me parecendo bug ou do Grunt ou do plugin. Você chegou a verificar se há bugs nessa versão?

Como não uso mais Grunt (uso Gulp) não acompanhei minuciosamente cada versão individualmente.

Gulp é melhor que Grunt? Ou é apenas questão de preferência?

Mas tente assim primeiro

proxy: 'localhost:80/alura-grunt'

Gulp é muito mais rápido por usar streams e a sintaxe é muito mais elegante. Mas se você escolheu Grunt é porque deve ter seus motivos.

Mas se você achou o primeiro curso superficial achará o segundo também. Ele usa o mesmo batalhão de plugins, aproximadamente.

Nunca tinha usado nenhum deles, então para mim é tudo novidade. Testarei o Gulp também para decidir com qual ficar. Obrigado

Mas antes de ir para o Gulp o ideal é que você consiga configurar o proxy antes. Tentou minha última sugestão?

Eu faço assim é funciona

options: {
    proxy: 'localhost:3000',
    watchTask: true
}

No seu caso só usar a porta do seu Server. Veja os ajustes necessários do caminho.

Quando o bs abrir automaticamente o browser ele abrirá no endereço do proxy é não utilizará a porta 3000, utilizará outra, por exemplo 3001.

Quando eu não coloco proxy ele carrega o código completo e abre o browser no endereço http://localhost:3000/ com o erro:

Cannot GET /

Código carregado após executar "grunt server":

C:\wamp\www\alura-grunt>grunt server
Running "browserSync:public" (browserSync) task
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.60:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.60:3001
 -------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

Quando eu coloco qualquer proxy, independente do valor ou porta (pelo menos todos que tentei até agora), não abre o browser e exibe apenas esse código (incompleto):

C:\wamp\www\alura-grunt>grunt server
Running "browserSync:public" (browserSync) task

Não sei mais o que tentar.