From 5700de632b0f5a7e7299226be8be6183f7b9222b Mon Sep 17 00:00:00 2001 From: Koslun Date: Tue, 19 Jul 2016 15:53:52 +0200 Subject: [PATCH] feat(project): replace livereload with browser-sync Closes #1955 --- templates/app/_package.json | 5 +- templates/app/gulpfile.babel.js | 10 +-- .../app/server/config/environment/index.js | 3 + templates/app/server/config/express.js | 80 +++++++++---------- 4 files changed, 46 insertions(+), 52 deletions(-) diff --git a/templates/app/_package.json b/templates/app/_package.json index 4645ff2bd..d29e135cb 100644 --- a/templates/app/_package.json +++ b/templates/app/_package.json @@ -65,6 +65,8 @@ "babel-core": "^6.6.5", "babel-eslint": "^6.0.4", "babel-register": "^6.6.5", + "browser-sync": "^2.8.0", + "bs-fullscreen-message": "^1.0.0", <%_ if(filters.flow) { -%> "flow-bin": "^0.27.0", "babel-plugin-syntax-flow": "^6.8.0", @@ -92,7 +94,6 @@ "gulp-inject": "^4.0.0", "gulp-istanbul": "~0.10.3", "gulp-istanbul-enforcer": "^1.0.3", - "gulp-livereload": "^3.8.0", "gulp-load-plugins": "^1.0.0-rc.1", "gulp-clean-css": "^2.0.6", "gulp-mocha": "^2.1.3", @@ -159,7 +160,6 @@ <%# END WEBPACK %> "through2": "^2.0.1", "open": "~0.0.4", - "connect-livereload": "^0.5.3", "istanbul": "~0.4.1", "chai": "^3.2.0", "sinon": "^1.16.1", @@ -182,6 +182,7 @@ "jasmine-spec-reporter": "^2.4.0",<% } %> "phantomjs-prebuilt": "^2.1.4", "proxyquire": "^1.0.1", + "strip-ansi": "^3.0.1", "supertest": "^1.1.0"<% if(filters.ts) { %>, "tslint": "^3.5.0", "typings": "^0.8.1"<% } %> diff --git a/templates/app/gulpfile.babel.js b/templates/app/gulpfile.babel.js index 2d5257d10..3272062f0 100644 --- a/templates/app/gulpfile.babel.js +++ b/templates/app/gulpfile.babel.js @@ -229,8 +229,7 @@ gulp.task('webpack:dev', function() { return gulp.src(webpackDevConfig.entry.app) .pipe(plugins.plumber()) .pipe(webpack(webpackDevConfig)) - .pipe(gulp.dest('.tmp')) - .pipe(plugins.livereload()); + .pipe(gulp.dest('.tmp')); }); gulp.task('webpack:dist', function() { @@ -311,7 +310,7 @@ gulp.task('clean:tmp', () => del(['.tmp/**/*'], {dot: true})); gulp.task('start:client', cb => { whenServerReady(() => { - open('http://localhost:' + config.port); + open('http://localhost:' + config.browserSyncPort); cb(); }); }); @@ -347,12 +346,9 @@ gulp.task('start:server:debug', () => { gulp.task('watch', () => { var testFiles = _.union(paths.client.test, paths.server.test.unit, paths.server.test.integration); - plugins.livereload.listen(); - plugins.watch(_.union(paths.server.scripts, testFiles)) .pipe(plugins.plumber()) - .pipe(lintServerScripts()) - .pipe(plugins.livereload()); + .pipe(lintServerScripts()); plugins.watch(_.union(paths.server.test.unit, paths.server.test.integration)) .pipe(plugins.plumber()) diff --git a/templates/app/server/config/environment/index.js b/templates/app/server/config/environment/index.js index 80cdd8b43..b82e4ae4f 100644 --- a/templates/app/server/config/environment/index.js +++ b/templates/app/server/config/environment/index.js @@ -19,6 +19,9 @@ var all = { // Root path of server root: path.normalize(`${__dirname}/../../..`), + // Browser-sync port + browserSyncPort: process.env.BROWSER_SYNC_PORT || 3000, + // Server port port: process.env.PORT || <%= devPort %>, diff --git a/templates/app/server/config/express.js b/templates/app/server/config/express.js index eae03e71b..83dd0c364 100644 --- a/templates/app/server/config/express.js +++ b/templates/app/server/config/express.js @@ -25,6 +25,9 @@ var MongoStore = connectMongo(session);<% } else if(filters.sequelize) { %> import sqldb from '../sqldb'; import expressSequelizeSession from 'express-sequelize-session'; var Store = expressSequelizeSession(session.Store);<% } %> +import stripAnsi from 'strip-ansi'; + +var browserSync = require('browser-sync').create(); export default function(app) { var env = app.get('env'); @@ -93,52 +96,43 @@ export default function(app) { const webpackConfig = makeWebpackConfig({ DEV: true }); const compiler = webpack(webpackConfig); - const pkgConfig = require('../../package.json'); - const livereloadServer = require('tiny-lr')(); - var livereloadServerConfig = { - ignore: [ - /^\/api\/(.*)/, - /\.js(\?.*)?$/, /\.css(\?.*)?$/, /\.svg(\?.*)?$/, /\.ico(\?.*)?$/, /\.woff(\?.*)?$/, - /\.png(\?.*)?$/, /\.jpg(\?.*)?$/, /\.jpeg(\?.*)?$/, /\.gif(\?.*)?$/, /\.pdf(\?.*)?$/ - ], - port: (pkgConfig.livereload || {}).port - }; - var triggerLiveReloadChanges = function() { - livereloadServer.changed({ - body: { - files: [webpackConfig.output.path + webpackConfig.output.filename] - } - }); - }; - if(livereloadServerConfig.port) { - livereloadServer.listen(livereloadServerConfig.port, triggerLiveReloadChanges); - } else { - /** - * Get free port for livereload - * server - */ - livereloadServerConfig.port = require('http').createServer().listen(function() { - /*eslint no-invalid-this:0*/ - this.close(); - livereloadServer.listen(livereloadServerConfig.port, triggerLiveReloadChanges); - }).address().port; - } - /** - * On change compilation of bundle - * trigger livereload change event + * Run Browsersync and use middleware for Hot Module Replacement */ - compiler.plugin('done', triggerLiveReloadChanges); - - app.use(webpackDevMiddleware(compiler, { - stats: { - colors: true, - timings: true, - chunks: false - } - })); + browserSync.init({ + open: false, + logFileChanges: false, + proxy: 'localhost:' + config.port, + ws: true, + middleware: [ + webpackDevMiddleware(compiler, { + noInfo: false, + stats: { + colors: true, + timings: true, + chunks: false + } + }) + ], + port: config.browserSyncPort, + plugins: ['bs-fullscreen-message'] + }); - app.use(require('connect-livereload')(livereloadServerConfig)); + /** + * Reload all devices when bundle is complete + * or send a fullscreen error message to the browser instead + */ + compiler.plugin('done', function (stats) { + console.log('webpack done hook'); + if (stats.hasErrors() || stats.hasWarnings()) { + return browserSync.sockets.emit('fullscreen:message', { + title: "Webpack Error:", + body: stripAnsi(stats.toString()), + timeout: 100000 + }); + } + browserSync.reload(); + }); } if ('development' === env || 'test' === env) {