JacksonGariety
gulp-nodemon + browser-sync loading very slow
"gulp-nodemon": "^2.2.1" "browser-sync": "^2.18.12" "gulp": "^3.9.1
gulpfile.js
const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const serverWatchFiles = [
'server.js',
'app/**/*',
];
const frontWatchFiles = [
'./public/**/*',
];
gulp.task('sass', () => {
gulp.src('./front/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css/'));
});
gulp.task('sass:watch', () => {
gulp.watch('./front/scss/**/*.scss', ['sass'], browserSync.reload);
});
gulp.task('browser-sync', () => {
browserSync.init(null, {
proxy: 'http://localhost:3000',
files: frontWatchFiles,
port: 4000,
// browser: ['google-chrome'],
});
});
gulp.task('nodemon', (cb) => {
let called = false;
return nodemon({
// nodemon our expressjs server
script: 'server.js',
ignore: [
'gulpfile.js',
'node_modules/**',
'public/uploads/**',
'public/lib/**',
],
// watch core server file(s) that require server restart on change
watch: serverWatchFiles,
})
.on('start', () => {
// ensure start only got called once
if (!called) {
cb();
called = true;
gulp.start('browser-sync');
}
})
.on('restart', () => {
browserSync.reload();
});
});
gulp.task('default', ['sass:watch', 'nodemon'], () => {
browserSync.reload();
});
It's loading too slow before render a page. Here's the output on console:
[07:24:30] Using gulpfile E:\Dev\NodeJS\nodejs-starter-app\gulpfile.js
[07:24:30] Starting 'sass:watch'...
[07:24:31] Finished 'sass:watch' after 899 ms
[07:24:31] Starting 'nodemon'...
[07:24:32] [nodemon] 1.11.0
[07:24:32] [nodemon] to restart at any time, enter `rs`
[07:24:32] [nodemon] watching: server.js app/**/*
[07:24:32] [nodemon] starting `node server.js`
[07:24:32] Finished 'nodemon' after 706 ms
[07:24:32] Starting 'default'...
[07:24:32] Finished 'default' after 503 μs
[07:24:32] Starting 'browser-sync'...
[07:24:32] Finished 'browser-sync' after 430 ms
[BS] Proxying: http://localhost:3000
[BS] Access URLs:
-------------------------------------
Local: http://localhost:4000
External: http://192.168.56.1:4000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.56.1:3001
-------------------------------------
[BS] Watching files...
✓ App is starting at http://:::3000
Db.prototype.authenticate method will no longer be available in the next major release 3.x as MongoDB 3.6 will only allo
w auth against users in the admin db and will no longer allow multiple credentials on a socket. Please authenticate usin
g MongoClient.connect with auth credentials.
MongoDB is running
@heinhoang Did you ever figure out the problem? I'm having the same issue.
hey @amack459, yes, I figured out why it is:
I use mongoose connect mongoose.connect(url) and it works asynchronously.
After gulp-nodemon finished it's tasks but mongoDb has not finished the connection yet so browsersync waiting for locallhost and it's loading and loading.
Then, after MongoDb connection finished but browsersync doesn't know about that and it continues loading.
Solution 1 is that: You can setTimeout() to wait for a few seconds before starting browser-sync task. Solution 2: may be better // Step 1: Write a logging file to inform connection finished
mongoose.connection
.once('open', () => {
fs.writeFile(`${app.get('rootDir')}/dbConnection.log`, `database connected on ${new Date()}`, (err) => {
if (err) throw err;
});
})
// Step 2: watch the log file and start browser-sync
gulp.task('log:watch', (cb) => {
gulp.watch('./dbConnection.log', () => {
let called = false;
if (!called) {
cb();
called = true;
gulp.start('browser-sync');
}
});
});