browser-sync не обновляет страницу после изменений с помощью Gulp

Question

Я новичок в Gulp, и я хотел использовать его автоматическую компиляцию scss и синхронизацию браузера. Но я не могу заставить его работать.

Я разделся все вниз, чтобы оставить только содержимое, например на сайте 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']); 

я могу назвать глотком служить. Сайт отображается, и я получаю сообщение от Browsersync. Когда я изменяю HTML, страница перезагружается. Однако, когда я изменяю scss, я могу это увидеть:

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

, но мне нужно перезагрузить его вручную. Что мне не хватает?

Answer 1

Вы можете просто вводить изменения, вместо того, чтобы заставить полное обновление браузера на SASS компиляции, если вам нравится.

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 2

Это потому, что вы звоните browserSync.reload на часы html, а не на часы scss.

Попробуйте это:

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

Answer 3

Это то, что я использую, и работа в порядке в дерзости или любые другие файлы

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

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

Answer 4

я включаю это на мой HTML, прямо под тегом тела. Оно работает.

<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

Столкнулся этой же проблемой, пытаясь перезагрузить php и js файлов и поток css файлов. Мне удалось использовать поток только с использованием метода pipe, что имеет смысл. Во всяком случае, вот что работает для меня:

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

Но я предпочитаю @ ответ Pixie в модифицированном:

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

Answer 6

Я тоже была такая же проблема. Он работал, когда я назвал метод перезагрузки отдельной задачей.

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

Answer 7

Я также столкнулся с подобной проблемой, когда я был новичком в использовании браузера синхронизации, командная строка говорит «перезагрузки браузеров», но браузер не обновляется вообще, проблема была я не включил тело тег на моей HTML-странице, где синхронизация браузера может добавить скрипт для его функциональности, убедитесь, что на вашей HTML-странице есть тег тела.