gulp-nodemon + browser-sync loading very slow

[heinhoang]

"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                                                                                                      

[amack459]

@heinhoang Did you ever figure out the problem? I'm having the same issue.

[heinhoang]

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.

[heinhoang]

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