javascript - example - install gulp

Gulp browser-sync solo funciona una vez

Question

Estoy probando Gulp en uno de mis proyectos y quería ejecutarlo como solía hacerlo con Grunt Watch. Es decir, tiene que ver menos archivos y archivos js, lint, merge, compilar y actualizar el navegador una vez que todo está hecho.

Pude hacer que funcione con gulp-browser-sync, pero por alguna razón solo funciona una vez. Hago un cambio en mi archivo .less y el navegador se recarga. Luego, un segundo cambio, se compila pero no se realiza ninguna recarga.

Aquí está el registro:

[BS] Serving files from: ./
[09:47:26] Starting ''css-clean''...
[09:47:26] Finished ''css-clean'' after 16 ms
[09:47:26] Starting ''styles''...
[BS] 1 file changed (styles.min.css)
[09:47:27] Finished ''styles'' after 624 ms
[09:47:27] Starting ''styles-watch''...
[BS] Reloading Browsers...

Y cuando presiono guardar una segunda vez:

[09:47:31] Starting ''css-clean''...
[09:47:31] Finished ''css-clean'' after 3.39 ms
[09:47:31] Starting ''styles''...
[BS] 1 file changed (styles.min.css)
[09:47:32] Finished ''styles'' after 362 ms

En cuanto al JS, funciona todo el tiempo. Sin problemas, incluso después de que la tarea de estilos se haya completado, los cambios de JS siguen activando la recarga correctamente. Realmente solo son los estilos que tienen problemas.

Aquí está el archivo gulpfile.js

var gulp = require(''gulp''),
    autoprefixer = require(''gulp-autoprefixer''),
    less = require(''gulp-less''),
    minifycss = require(''gulp-minify-css''),
    concat = require(''gulp-concat''),
    jshint = require(''gulp-jshint''),
    uglify = require(''gulp-uglify''),
    rename = require(''gulp-rename''),
    notify = require(''gulp-notify''),
    path = require(''path''),
    streamqueue = require(''streamqueue''),
    clean = require(''gulp-clean''),
    browserSync = require(''browser-sync'').create(),
    reload = browserSync.reload;


// Clean the CSS folder
gulp.task(''css-clean'', function () {
    return gulp.src([''dist/css''], {read: false})
        .pipe(clean());
});

// Clean the CSS folder
gulp.task(''js-clean'', function () {
    return gulp.src([''dist/js''], {read: false})
        .pipe(clean());
});


// Generate the CSS styles, clean before hand
gulp.task(''styles'', [''css-clean''], function() {
  return streamqueue({ objectMode: true },
            gulp.src([''./bower_components/uikit/less/uikit.less'']),
            gulp.src([''./src/less/main.less''])
        )
    .pipe(concat(''styles.less''))
    .pipe(less({
      paths: [ path.join(__dirname, ''less'', ''includes'') ]
    }))
    .pipe(autoprefixer(''last 2 version'', ''safari 5'', ''ie 8'', ''ie 9'', ''opera 12.1'', ''ios 6'', ''android 4''))
    .pipe(gulp.dest(''dist/css''))
    .pipe(rename({suffix: ''.min''}))
    .pipe(minifycss())
    .pipe(gulp.dest(''dist/css''))
    .pipe(browserSync.reload({stream:true}));
});

// create a task that ensures the `styles` task is complete before
// reloading browsers
gulp.task(''styles-watch'', [''styles''], browserSync.reload);



// Lint Task
gulp.task(''lint'', function() {
    return gulp.src(''src/js/*.js'')
        .pipe(jshint())
        .pipe(jshint.reporter(''default''));
});


// Generate the scripts, clean before hand
gulp.task(''scripts'', [''js-clean'', ''lint''], function() {
  return streamqueue({ objectMode: true },
            gulp.src([''./bower_components/jquery/dist/jquery.js'']),
            gulp.src([''./bower_components/modernizer/modernizr.js'']),
            gulp.src([''./bower_components/uikit/js/uikit.js'']),
            gulp.src([''./src/js/plugin.js'']),
            gulp.src([''./src/js/main.js''])
        )
    .pipe(concat(''scripts.js''))
    .pipe(gulp.dest(''dist/js''))
    .pipe(rename({suffix: ''.min''}))
    .pipe(uglify())
    .pipe(gulp.dest(''dist/js''))
    .pipe(browserSync.reload({stream:true}));
});

// create a task that ensures the `scripts` task is complete before
// reloading browsers
gulp.task(''scripts-watch'', [''scripts''], browserSync.reload);


// Lint Task
gulp.task(''alldone'', [''scripts''], function() {
    return gulp.src(''src/js/*.js'')
               .pipe(notify({ message: ''Gulp tasks are completed!!'' }));
});


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

    gulp.watch("src/less/*.less", [''styles-watch'']);
    gulp.watch(''src/js/*.js'', [''lint'', ''scripts-watch'']);
    gulp.watch("*.html").on(''change'', reload);
});


// Default Task
gulp.task(''default'', [''css-clean'', ''js-clean'', ''styles'', ''lint'', ''scripts'', ''alldone'']);

// Build Task
gulp.task(''build'',   [''css-clean'', ''js-clean'', ''styles'', ''lint'', ''scripts'', ''alldone'']);

¡Gracias por tu ayuda!

Answer 1

Para mí, en Gulp 4, la función anónima no resolvió el problema. Lo que hice fue ajustar el navegadorSync.reload () en una función con una devolución de llamada realizada:

function reload(done) {
  browserSync.reload();
  done();
}

gulp.watch([''scripts/**/*.js'',''!scripts/main.min.js''], gulp.series(buildScripts, reload));

Answer 2

¿Estás seguro de que el CSS no ha cambiado en el navegador? Los nuevos estilos se cargan sin necesidad de volver a cargar la página. Al menos eso es lo que está haciendo mi trago.

Intente cambiar el archivo .less y vea si el cambio es realmente visible en el navegador.

Answer 3

Mi situación es un poco diferente, pero podría ser lo suficientemente similar como para ser útil para usted u otra persona. Tengo gulp + browserSync configurado de esta manera:

.task(''serve'', [''clean'', ''lint'', ''sass'', ''js'', ''server''], function () {
  return gulp.watch([paths.js, paths.html, paths.sass], 
    [''lint'', ''sass'', ''js'', browserSync.reload]);
})

Esto se iniciará y abrirá la página una vez. Si realizaba un cambio en la página HTML y la guardaba, podía ver ejecutar lint, sass, js y browserSync.reload, pero el navegador no se actualizaba. Mi HTML era muy simple; esta:

<!doctype html>
<html>
TEST
</html>

Cambié el HTML a esto finalmente y comenzó a funcionar:

<!doctype html>
<html>
<head>
    <title>TEST</title>
</head>
<body>
HELLO-TEST
</body>
</html>

Answer 4

¿Qué tal el uso directo?

.pipe(browserSync.stream())

Una vez tuve el mismo problema al cambiar los archivos ''.jade'' que solo se volvieron a cargar una vez. Luego envolví browserSync.reload en una función anónima como

gulp.task(''templates-watch'', [''templates''], function() {
    browserSync.reload();
});

Esto funciona para mi. No sé si hay algo especial sobre browserSync.reload . ¿Qué tal intentarlo? :)