web-dev-qa-db-fra.com

la synchronisation du navigateur ne rafraîchit pas la page après les modifications apportées à Gulp

Je suis nouveau sur Gulp et je voulais utiliser sa compilation automatique de scss et sa synchronisation de navigateur. Mais je ne peux pas le faire fonctionner.

J'ai tout supprimé pour ne laisser que le contenu de l'exemple sur le site Web 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']);

Je peux appeler gulp serve. Le site s'affiche et je reçois un message de Browsersync. Lorsque je modifie le HTML, la page est rechargée. Quand cependant je modifie le scss, je peux voir ceci:

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

mais je dois recharger manuellement. Qu'est-ce que je rate?

sassgulpbrowser-sync
22
raichu

Vous pouvez simplement injecter les modifications au lieu d'avoir à forcer une actualisation complète du navigateur sur la compilation SASS si vous le souhaitez.

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'}));
});
16
Dan Gamble

J'ai également rencontré un problème similaire lorsque j'étais nouveau dans l'utilisation de la synchronisation du navigateur, la ligne de commande disait "rechargement des navigateurs" mais le navigateur n'était pas du tout actualisé, le problème était que je n'avais pas inclus de balise body dans ma page HTML où le la synchronisation du navigateur peut injecter un script pour sa fonctionnalité, assurez-vous que votre page HTML a une balise body.

36
SU15

C'est parce que vous appelez browserSync.reload sur la montre html et non sur la montre scss.

Essaye ça:

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

C'est ce que j'utilise et ça marche très bien dans SASS ou tout autre fichier

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

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

A rencontré ce même problème en essayant de recharger les fichiers php et js et de diffuser les fichiers css. J'ai pu utiliser stream uniquement en utilisant une méthode pipe, ce qui est logique. Quoi qu'il en soit, voici ce qui a fonctionné pour moi:

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

Mais, je préfère en fait la réponse de @ pixie modifiée:

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

J'ai également eu le même problème. Cela a fonctionné lorsque j'ai appelé la méthode de rechargement en tant que tâche distincte.

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']);
})
1
Lasithds

Parfois, lorsque vous utilisez l'interface CLI, le script n'est pas inséré dans vos fichiers HTML principaux, vous devez donc l'ajouter manuellement ou utiliser 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 -->
1
Ahmad Awais

Je l'inclus sur mon html, juste en dessous de la balise body. Ça marche.

<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>
0
user3660139