Gulp browser-sync not reloading - html

Question

This is my gulpfile.js file. It doesn't reload when I change and save my css or html, but it shows the "Connected to Browser-sync" message when I use gulp serve. I can't seem to figure out what is wrong.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');
gulp.task('styles', function() {
gulp.src('./css/*.css')
.pipe(gulp.dest('./css'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('./css/*.css',['styles']);
});
gulp.task('js', function () {
return gulp.src('./js/*.js')
// .pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(gulp.dest('./'));
});
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('html-watch', ['html'], browserSync.reload);
gulp.task('css-watch', ['css'], browserSync.reload);
gulp.task('serve', ['js', 'html', 'styles'], function () {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("./*.js", ['js-watch']);
gulp.watch("./*.html", ['html-watch']);
gulp.watch("./css/*.css", ['css-watch']);
});

Answer 1

Try this.
All i did was add a new dependency.. run-sequence, to make it easy to organize how things are run. All you need is to run gulp to start the script and everything should run perfectly.
Aside from that i created a site folder at the root of my project. just because it seems more organize that way, and if you ever think of using jade, or sass, scss, etc. in your project and all you have to do is change the src path and keep the rendered output in the site folder..
Aside from that, everything is the same.
EDIT
I forgot to mention that i also added the pipe(bs.stream()); line at the end of each task such as HTML, styles, and JS, so that the browser reloads every time you make a change.
In case you don't want to make the server folder to keep your project organized, the all you have to do is delete the site/ path where ever you see it. and for server: 'site' just replace site with ./. Port you can delete it or define your own port
var gulp = require('gulp'),
bs = require('browser-sync').create(),
sequence = require('run-sequence');
gulp.task('styles', function() {
gulp.src('site/css/*.css')
.pipe(gulp.dest('site/css'))
.pipe(bs.stream());
});
gulp.task('js', function() {
gulp.src(['site/js/*.js'])
// .pipe(concat('all.js'))
.pipe(gulp.dest('site/js'))
.pipe(bs.stream());
});
gulp.task('html', function() {
gulp.src('site/*.html')
.pipe(gulp.dest('site'))
.pipe(bs.stream());
});
gulp.task('browser-sync', function() {
bs.init({
server: 'site',
port: 3010
});
});
gulp.task('watch', ['build'], function() {
gulp.watch(['site/css/*.css'], ['styles']);
gulp.watch(['site/js/*.js'], ['js']);
gulp.watch(['site/*.html'], ['html']);
});
gulp.task('build', function(done) {
sequence(
['html', 'js', 'styles'],
'browser-sync',
done);
});
gulp.task('default', ['watch']);