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

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

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

Answer 2

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