I am trying to setup browser-sync on my gulp pipeline for development but I can't seem to get the reload working. A browser tab is opened when I run gulp start but reload doesn't cause subsequent browser refresh.
Steps that I follow in my gulpfile -
gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.
Also, there's this error that I see only when I run with browser-sync image I do not see the above error when I run standard - gulp node dist/app.js
I have searched all over the place but can't find an example which leads me to believe that there is something wrong with my gulp workflow.
Also something that may come in handy is that when I open browser sync UI -
I can confirm that the <body> tag is present and this is what my source looks like on browser -
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
<script src="lib/es6-shim.min.js"></script>
<script src="lib/system-polyfills.js"></script>
<script src="lib/shims_for_IE.js"></script>
<script src="lib/angular2-polyfills.js"></script>
<script src="lib/system.src.js"></script>
<script src="lib/Rx.js"></script>
<script src="lib/angular2.dev.js"></script>
<script src="lib/router.dev.js"></script>
<script src="lib/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
<my-app>Loading...</my-app>
</body>
</html>
I can see the browser-sync script tag rendered here.
I am totally at loss here. Could someone help me out with this/ identify if this is an issue with browser-sync itself?
Here's my gulpfile -
var gulp = require('gulp');
var tsc = require('gulp-typescript');
var tsProject = tsc.createProject('client/tsconfig.json');
var sourcemaps = require('gulp-sourcemaps');
var config = require('./gulp.config')();
var del = require('del');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var node;
var spawn = require('child_process').spawn;
var path = require('path');
gulp.task('clean', function() {
return del(config.distDir);
});
gulp.task('server', ['clean'], function() {
return gulp.src(config.nodeHost)
.pipe(gulp.dest(config.distDir))
});
gulp.task('lib', ['clean'], function() {
return gulp.src(config.angularLibraries)
.pipe(gulp.dest(path.join(config.distDir,'client','lib')));
});
gulp.task('compile-ts', ['clean'], function() {
var sourceTsFiles = [
config.allTs,
config.typings
];
var tsResult = gulp.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(path.join(config.distDir,'client')));
});
gulp.task('index', ['compile-ts', 'lib', 'clean'], function() {
return gulp.src(config.indexFile)
.pipe(gulp.dest(path.join(config.distDir,'client')));
});
gulp.task('build', ['compile-ts', 'lib', 'index', 'server']);
gulp.task('default', ['build']);
// Deveopment serve tasks - start
gulp.task('watch', function() {
gulp.watch(['./app.js', '!./dist/**', './client/**'], ['stop', 'reload']);
});
gulp.task('browser-sync', ['nodestart'], function() {
browserSync.init(null, {
proxy: "http://localhost:3001",
port: 7000,
});
});
gulp.task('reload-browser-sync', ['nodestart'], function() {
reload();
});
gulp.task('nodestart', ['build'], function() {
node = spawn('node', ['dist/app.js'], { stdio: 'inherit' })
node.on('close', function(code) {
if (code === 8) {
gulp.log('Error detected, waiting for changes...');
}
});
});
gulp.task('start', ['build', 'nodestart', 'watch', 'browser-sync']);
gulp.task('reload', ['build', 'nodestart', 'reload-browser-sync']);
gulp.task('stop', function() {
if (node) node.kill();
});
// Deveopment serve tasks - end
Here's the repo - https://github.com/saumyatripathi/angular_2_gulp_workflow
EDIT: Here's the browser console when I run it without browser-sync.
EDIT: For anyone interested in tracking the progress of the issue I raised on browser-sync repo, here's the link - https://github.com/BrowserSync/browser-sync/issues/1037
