the broswer cannot reload when files updates using gulp and browser-sync

Question

I have total followed the instructions of https://browsersync.io/docs/gulp

my gulpfile.js code：

let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;

gulp.task('server', ['css'], function() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });

  gulp.watch('src/sass/*.scss', ['css']);
  gulp.watch("dist/*.html").on('change', reload);
  gulp.watch("dist/sass/*.css").on('change', reload);
});

// 编译Sass
gulp.task('css', function() {  // 任务名
  return gulp.src('src/sass/a.scss')  // 目标 sass 文件
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest('dist/sass/'))  // 目标目录
    // .pipe(reload({stream: true}))
    .pipe(browserSync.stream());
});

gulp.task('default', ['server']);

when I update the sass file, it seems that the css file will be updated immediately, but the broswer cannot reload.

and the command line show：

It seem that the cli cannot connect to the broswer?

===

The problem is solved，my html file does not have a body tag，see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582

Answer 1

The problem is solved，my html file does not have a body tag，see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582

Answer 2

I post you my GULP FILE ... as you can see i use the

gulp-webserver

it only need to put reload:true to work as you aspect:

"use strict";

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json"); // make sure bundleconfig.json doesn't contain any comments
var livereload = require('gulp-livereload');

var changed = require('gulp-changed');
var stripDebug = require('gulp-strip-debug');
var minifyHTML = require('gulp-minify-html');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');
var ngAnnotate = require('gulp-ng-annotate');
var templateCache = require('gulp-angular-templatecache');
var webserver = require('gulp-webserver'); //<-- YOU HAVE TO INSTALL IT MAYBE WITH NPM (npm install --save -dev gulp-webserver)

// THESE IS THE TASK FOR WEB SERVER AND RELOAD
gulp.task('webserver', function () {
    gulp.src('')
        .pipe(webserver({
            host: 'localhost', // <-- IF YOU PUT YOUR IP .. YOU CAN WATCH IT FROM OTHER devices
            port: 80,
            livereload: true,
            directoryListing: true,
            open: true,
            fallback: 'index-dev.html'
        }));
});



// Task to process Index page with different include ile based on enviroment
gulp.task('html-dev', function () {
    return gulp.src('Index.html')

         .pipe(preprocess({ context: { NODE_ENV: 'dev', DEBUG: true } })) //To set environment variables in-line 
         .pipe(rename({ suffix: '-dev' }))
         .pipe(gulp.dest(''));
});

// Task to process Index page with different include ile based on enviroment

gulp.task('html-prod', function () {
    return gulp.src('Index.html')

        .pipe(preprocess({ context: { NODE_ENV: 'prod', DEBUG: false } })) //To set environment variables in-line 
        .pipe(rename({ suffix: '-prod' }))
        .pipe(gulp.dest(''));
});


// CSS concat, auto-prefix, minify, then rename output file
gulp.task('minify-css', function () {
    var cssPath = { cssSrc: ['./app/view/assets/content/css/styles-default.css', './app/view/assets/content/css/styles-theme-1.css', './app/view/assets/content/css/styles-theme-2.css', '!*.min.css', '!/**/*.min.css'], cssDest: './app_build/content_build/css' };

    return gulp.src(cssPath.cssSrc)
     // .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app_build/content_build/css/*.css -r']))
    //  .pipe(concat('styles.css'))
      .pipe(autoprefix('last 2 versions'))
      .pipe(minifyCSS())
      .pipe(rename({ suffix: '.min' }))
      .pipe(gulp.dest(cssPath.cssDest));
});


// Lint Task
gulp.task('lint', function () {
    var jsPath = { jsSrc: ['./app/app.js', './app/controller/*.js', './app/view/utils/directives/*.js', './app/model/services/*.js'] };
    return gulp.src(jsPath.jsSrc)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//SASS task
gulp.task('sass', function () {
    var sassPath = {
        cssSrc: ['./app/view/assets/content/css/*.scss'], cssDest: './app/view/assets/content/css'
    };
    gulp.src(sassPath.cssSrc)
      .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app/view/assets/content/css/*.css -r']))
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest(sassPath.cssDest))
      .pipe(livereload());
});


gulp.task('cache', function () {
    return gulp.src('./app/view/template/**/*.html')
      .pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/template' }))
      .pipe(gulp.dest('./app/view/template'))
      .pipe(livereload());
});

gulp.task('cache-directives', function () {
    return gulp.src('./app/view/utils/directives/template/**/*.html')
      .pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/utils/directives/template' }))
      .pipe(gulp.dest('./app/view/utils/directives/template'))
      .pipe(livereload());
});


gulp.task("min:js", function () {
    var tasks = getBundles(".js").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
             .pipe(ngAnnotate({
                 remove: true,
                 add: true,
                 single_quotes: false
             }))
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

//gulp.task("min:css", function () {
//    var tasks = getBundles(".css").map(function (bundle) {
//        return gulp.src(bundle.inputFiles, { base: "." })
//            .pipe(concat(bundle.outputFileName))
//            .pipe(cssmin())
//            .pipe(gulp.dest("."));
//    });
//    return merge(tasks);
//});

gulp.task("min:html", function () {
    var tasks = getBundles(".html").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest("."));
        //.pipe(livereload());
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("min", ["clean", "min:js", "minify-css", 'html-dev', "cache", "cache-directives"]);
gulp.task("default", ["watch", "webserver"]);
gulp.task("watch", function () {
     livereload.listen();

    // watch for JS error
    gulp.watch(['./app/app.js', './app/controllers/*.js', './app/directives/*.js', './app/services/*.js'], ['lint']);

    // min js
    getBundles(".js").forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    //watch for SASS changes
    gulp.watch('./app/view/assets/content/css/scss/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/scss/settings/*.scss', ['sass']);
    gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/base/*.scss', ['sass']);
    gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/modules/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/*.scss', ['sass']);
    gulp.watch('./app/view/assets/content/css/Hover-master/scss/*.scss', ['sass']);

    //gulp.watch('./app/view/assets/content/css/*.css', ['minify-css']);
    //watch for PREPROCCESS x PROD
    gulp.watch('Index.html', ['html-prod']);
    //watch for PREPROCCESS x DEV
    gulp.watch('Index.html', ['html-dev']);
    //watch for TEMPLATE CACHE
    gulp.watch('./app/view/template/**/*.html', ['cache']);
    gulp.watch('./app/view/utils/directives/template/**/*.html', ['cache-directives']);

});

function getBundles(extension) {
    return bundleconfig.filter(function (bundle) {
        return new RegExp(extension).test(bundle.outputFileName);
    });
}