Gulp w/Browsersync Boots 但没有页面重新加载答案

【问题标题】：Gulp w/Browsersync Boots but no page reloadGulp w/Browsersync Boots 但没有页面重新加载
【发布时间】：2015-06-09 20:06:59
【问题描述】：

所以我似乎有 gulp 与 browsersync 一起工作。当我开始 gulp 时，它会打开我的浏览器并给我以下信息：

[13:01:41] Using gulpfile D:\Test\gulpfile.js
[13:01:41] Starting 'browser-sync'...
[13:01:41] Finished 'browser-sync' after 46 ms
[13:01:41] Starting 'default'...
[13:01:41] Finished 'default' after 12 µs
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://10.127.127.1:3000
 -------------------------------------
      UI: http://localhost:3001
  UI External: http://10.127.127.1:3001
 -------------------------------------
[BS] Serving files from: ./

这是我的 gulpfile

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


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

gulp.task('default', ['browser-sync']);

我希望只查看项目中的所有文件并在有更改时重新加载。

【问题讨论】：

它可以选择实时重新加载

标签： gulp browser-sync

【解决方案1】：

尝试修改你的任务（只需添加一行）

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch("**/*").on('change', browserSync.reload); // add this line 
});

或者你可以试试我的 gulp 配置https://github.com/infernalmaster/gulp-happy-starter（里面有很多代码示例）

【讨论】：

【解决方案2】：

你可以在 browserSync.init 之后尝试制作和数组：

browserSync.init([ "./assets/styles/**/*.css" , "./*.html" ],{
    server: {
        baseDir: "./"
    }
});

在数组中添加你的文件路径，然后观察变化：

gulp.watch("*.css").on("change", browserSync.reload));
gulp.watch("*.html").on("change", browserSync.reload));

【讨论】：