Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

14
respostas

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.