3
respostas

Aula 4 - BrowserSync não atualiza a página

Quando eu executo o comando o navegador abre, mas eu altero os arquivos e não recarrega a página e não da nenhuma mensagem de erro nem no console.

gulpfile.js

var gulp            = require('gulp'),
    imagemin        = require('gulp-imagemin'),
    clean           = require('gulp-clean'),
    uglify          = require('gulp-uglify'),
    cssmin          = require('gulp-cssmin'),
    usemin          = require('gulp-usemin'),
    browserSync     = require('browser-sync'),
    jshint          = require('gulp-jshint'),
    stylish         = require('jshint-stylish'),
    csslint         = require('gulp-csslint'),
    autoprefixer    = require('gulp-autoprefixer'),
    less            = require('gulp-less');


gulp.task('default', ['copy'], function(){
    gulp.start('build-img', 'usemin');
});

gulp.task('build-img', function(){
    gulp.src('src/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('src/img'));
});

gulp.task('usemin', function(){
    return gulp.src('dist/**/*.html')
               .pipe(
                   usemin({
                       js   :   [uglify],
                       css  :   [autoprefixer, cssmin]
                   })
               )
               .pipe(gulp.dest('dist'));
});

gulp.task('copy', ['clean'], function(){
    return gulp.src('src/**/*')
               .pipe(gulp.dest('dist'));
});

gulp.task('clean', function(){
    return gulp.src('dist')
               .pipe(clean());
});

gulp.task('server', function(){
    browserSync.init({
        server: {
            baseDir :   'src'
        }
    });

    gulp.watch('src/less/**/*.less').on('change', function(event){
        gulp.src(event.path)
            .pipe(
                less().on('error', function(error){
                    console.log('LESS, erro de compilação: ' + error.filename);
                    console.log(error.message);
                })
            )
            .pipe(gulp.dest('src/css'));
    });

    gulp.watch('src/css/**/*.css').on('change', function(event){
        gulp.src(event.path)
            .pipe(csslint())
            .pipe(csslint.reporter());
    });

    gulp.watch('src/js/**/*.js').on('change', function(event){
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(stylish));
    });

    gulp.watch('src/**/*').on('change', browserSync.reload);
});

No console do terminal:

PS D:\Programação\Alura\FrontEnd\engenheiro-frontend\projeto> npm run gulp server

> projeto@1.0.0 gulp D:\Programação\Alura\FrontEnd\engenheiro-frontend\projeto
> gulp "server"

[10:57:23] Using gulpfile D:\Programação\Alura\FrontEnd\engenheiro-frontend\projeto\gulpfile.js
[10:57:23] Starting 'server'...
[10:57:24] Finished 'server' after 159 ms
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.56.1:3001
 -------------------------------------
[BS] Serving files from: src
[BS] Reloading Browsers...
3 respostas

Tenta trocar de: baseDir: 'src' para: baseDir: './src'

Olá, mesmo alterando para baseDir : './src', não funciona. A mensagem Reloading Browsers... é exibida no terminal, mas o navegador não atualiza.

Fala Deivid,

Chegeui a ter o mesmo problema, mas mudei a versão do BrowserSync para 2.26.3 e funcionou.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software