javascript - habilitar - Mira el nuevo archivo en un trago y un problema con la sincronización de navegadores

habilitar javascript en chrome en windows

Question

Estoy usando browsersync para volver a cargar el navegador cuando el archivo ha cambiado. y es un trabajo perfecto. ¡Pero cuando creo un archivo nuevo como html - scss - js bowsersync no funcionan! ¿Cómo arreglar este problema?

gulpjs:

// Browser Sync
gulp.task(''browser-sync'', function() {
    browserSync({
        injectChanges: true,
        notify: false,
        server:  "app"
    });
});


gulp.task(''default'',[''sass'',''scripts'', ''browser-sync''], function(){
    gulp.watch("app/**/*.html").on(''change'', reload);
    gulp.watch(''app/img/*.*'', [''bs-reload'',''images'']);
    gulp.watch(''src/scss/**/*.scss'', [''sass'']);
    gulp.watch(''src/js/**/*.js'', [''scripts'',''uglify'']);
});

Answer 1

Resulta que la solución es bastante simple. No use gulp.watch. Use browserSync.watch en su lugar. También voy a reorganizar tu tarea y agregar una configuración. Ayuda en esta instancia:

gulpfile.js

// ------------------------------------------------------ Config
var config = {
    bs: {
        opts: {
            injectChanges: true,
            notify: false,
            server:  "app"
        },
        watch: [
            ''app/**/*.html'',
            ''app/img/*.*'',
            ''src/js/**/*.js''
        ]
    }
}

// ------------------------------------------------ Browser Sync
gulp.task(''browser-sync'', function() {
    browserSync.init( config.bs.opts );

    browserSync.watch( ''./src/scss/**/*.{scss,sass}'', [ ''sass'' ] );
    browserSync.watch( ''src/js/**/*.js'', [ ''scripts'', ''uglify'' ] );
    browserSync.watch( ''app/img/*.*'', [ ''images'' ] );
    browserSync.watch( config.bs.watch ).on(''change'', reload);
});

// ----------------------------------------------------- Default
gulp.task( ''default'', [ ''sass'',''scripts'', ''browser-sync'' ] );

Eso debería funcionar. Espero que ayude.