browsersync - gulp sass

browser-sync no actualiza la página después de los cambios con Gulp

Question

Soy nuevo en Gulp y quería hacer uso de su compilación automática y la sincronización del navegador. Pero no puedo hacerlo funcionar.

Desplegué todo para dejar solo el contenido del ejemplo en el sitio web de Browsersync:

http://www.browsersync.io/docs/gulp/#gulp-sass-css

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

// Static Server + watching scss/html files
gulp.task(''serve'', [''sass''], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", [''sass'']);
    gulp.watch("app/*.html").on(''change'', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task(''sass'', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task(''default'', [''serve'']);

Puedo llamar al servicio de trago. El sitio se muestra y recibo un mensaje de Browsersync. Cuando modifico el HTML, la página se vuelve a cargar. Cuando sin embargo modifico el scss, puedo ver esto:

[BS] 1 file changed (test.css)
[15:59:13] Finished ''sass'' after 18 ms

Pero tengo que recargar manualmente. ¿Qué me estoy perdiendo?

Answer 1

A veces, cuando usa la CLI, no tiene el script insertado en sus archivos principales HTML, por lo que debe agregarlo manualmente o usar Gulp.

    <!-- START: BrowserSync Reloading -->
    <script type=''text/javascript'' id="__bs_script__">
        //<![CDATA[
        document.write("<script async src=''/browser-sync/browser-sync-client.js''><//script>".replace("HOST", location.hostname));
        //]]>
    </script>
    <!-- END: BrowserSync Reloading -->

Answer 2

Esto es lo que uso y funciona bien en Sass o en cualquier otro archivo.

gulp.task(''browser-sync'', function () {
   var files = [
      ''*.html'',
      ''css/**/*.css'',
      ''js/**/*.js'',
      ''sass/**/*.scss''
   ];

   browserSync.init(files, {
      server: {
         baseDir: ''./''
      }
   });
});

Answer 3

Esto se debe a que está llamando a browserSync.reload en el reloj html y no al reloj scss.

Prueba esto:

gulp.watch("app/scss/*.scss", [''sass'']).on(''change'', browserSync.reload);
gulp.watch("app/*.html").on(''change'', browserSync.reload);

Answer 4

Incluyo esto en mi html, justo debajo de la etiqueta del cuerpo. Funciona.

<script type=''text/javascript'' id="__bs_script__">//<![CDATA[
document.write("<script async src=''http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js''><//script>".replace("HOST", location.hostname));//]]>
</script>

Answer 5

Se encontró con este mismo problema al intentar recargar archivos php y js y transmitir archivos css . Pude usar el flujo solo usando un método de pipe , lo cual tiene sentido. De todos modos, esto es lo que funcionó para mí:

gulp.watch([''./**/*.css'']).on(''change'', function (e) {
    return gulp.src( e.path )
        .pipe( browserSync.stream() );
});

Pero, en realidad prefiero la respuesta de @ pixie modificada:

gulp.task(''default'', function() {
    var files = [
            ''./**/*''
        ];
    browserSync.init({
        files : files,
        proxy : ''localhost'',
        watchOptions : {
            ignored : ''node_modules/*'',
            ignoreInitial : true
        }
    });
});

Answer 6

Solo puede inyectar los cambios en lugar de tener que forzar una actualización completa del navegador en la compilación SASS si lo desea.

browserSync.init({
    injectChanges: true,
    server: "./app"
});

gulp.task(''sass'', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream({match: ''**/*.css''}));
});

Answer 7

También me enfrenté a un problema similar cuando era nuevo en el uso de sincronización de navegador, la línea de comandos decía "recargar los navegadores" pero el navegador no se actualizó en absoluto, el problema era que no había incluido una etiqueta de cuerpo en mi página HTML donde browser-sync puede inyectar script para su funcionalidad, asegúrese de que su página HTML tenga etiqueta de cuerpo.

Answer 8

También tuve el mismo problema. Funcionó cuando llamé al método de recarga como una tarea separada.

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

gulp.task(''reload'', function(){
    browserSync.reload()
})

gulp.task(''watch'', [''sass'', ''css'', ''browserSync''], function(){
   gulp.watch(''*.html'', [''reload'']);
})