1
resposta

A página não está recarregando após ser feita alterações no arquivo

Não estou conseguindo fazer a página recarregar de forma automatizada. Tentei atualizar a versão do browser-sync, mas mesmo assim não funcionou. Atualizei para "browser-sync": "2.24.4" e depois pra última versão "browser-sync": "^2.26.3". Mas em nenhuma das duas funcionou.

Prompt

Internet-de-Backup:projeto-gulp comitecriativo$ npm run gulp server

> projeto@1.0.0 gulp /Applications/MAMP/htdocs/www/projeto-gulp
> gulp "server"

[11:08:49] Using gulpfile /Applications/MAMP/htdocs/www/projeto-gulp/gulpfile.js
[11:08:49] Starting 'server'...
[11:08:49] Finished 'server' after 98 ms
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000
    External: http://192.168.137.190:3000
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------
[Browsersync] Serving files from: src
[Browsersync] Reloading Browsers...

gulpfile.js

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    htmlReplace = require('gulp-html-replace'),
    uglify = require('gulp-uglify'),
    usemin = require('gulp-usemin'),
    cssmin = require('gulp-cssmin'),
    browserSync = require('browser-sync');

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

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('build-img', function() {
    gulp.src('dist/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

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

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: 'src'
        }
    });
    gulp.watch('src/**/*').on('change', browserSync.reload);
});

package.json

{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.5.4",
    "gulp-imagemin": "^2.3.0",
    "gulp-uglify": "^1.4.1",
    "gulp-usemin": "^0.3.14"
  }
}
1 resposta

Fala aí Paulo, tudo bem? Ví que você está usando a versão 2.26.3(mais recente), nela, importação do BrowserSync é um pouco diferente, você precisa chamar a função .create():

Seu código:

browserSync = require('browser-sync');

Tente trocar por:

browserSync = require('browser-sync').create();

Espero ter ajudado.

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