Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

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

Não estou conseguindo fazer a página recarregar de forma automatizada.

Prompt

[> projeto@1.0.0 gulp C:\Users\Igor\Desktop\stellar\projeto
> gulp

[18:07:34] Using gulpfile ~\Desktop\stellar\projeto\gulpfile.js
[18:07:34] Starting 'clean'...
[18:07:34] Finished 'clean' after 75 ms
[18:07:34] Starting 'copy'...
[18:07:34] Finished 'copy' after 284 ms
[18:07:34] Starting 'default'...
[18:07:34] Starting 'build-img'...
[18:07:34] Starting 'usemin'...
[18:07:34] Starting 'server'...
[18:07:35] Finished 'server' after 189 ms
[18:07:35] Finished 'default' after 269 ms
[18:07:38] Finished 'usemin' after 3.23 s
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.31:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.31:3001
 -------------------------------------
[BS] Serving files from: src
[18:07:39] gulp-imagemin: Minified 59 images (saved 19.32 kB - 0.3%)
[18:07:39] Finished 'build-img' after 4.59 s
[BS] 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'),
    htmlmin = require('gulp-htmlmin'),
    browserSync = require('browser-sync'),
    less = require('gulp-less');

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

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

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

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

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

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

Está dando algum erro no console?

Nenhum

Estou sem ideias, preciso estudar mais sobre esse assunto. Algum instrutor poderia nos ajudar a chegar nessa solução?

Estou tendo mesmo problema, o que fazer???

solução!

Consegui resolver aqui, no curso ele pede para instalar uma versão de browser-sync, quando na verdade o que ele usa é "browser-sync": "2.24.4" atualizei aqui e funcionou na hora

Deu certo aqui tmb! Mto obrigado Dhebora!!!