Skip to content

Instantly share code, notes, and snippets.

Last active November 8, 2022 12:31
Show Gist options
  • Save sogko/b53d33d4f3b40d3b4b2e to your computer and use it in GitHub Desktop.
Save sogko/b53d33d4f3b40d3b4b2e to your computer and use it in GitHub Desktop.
gulp + expressjs + nodemon + browser-sync
'use strict';
// simple express server
var express = require('express');
var app = express();
var router = express.Router();
app.get('/', function(req, res) {
'use strict';
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
gulp.task('default', ['browser-sync'], function () {
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:5000",
files: ["public/**/*.*"],
browser: "google chrome",
port: 7000,
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: 'app.js'
}).on('start', function () {
// to avoid nodemon being started multiple times
// thanks @matthisk
if (!started) {
started = true;
<link rel="stylesheet" href="site.css"/>
<!-- some dummy non-conforming quick dirty html code to test browser-sync. dont't judge me. -->
<b>lorem</b> ipsum upsum dumsum
<!-- put this under /public/* -->
"name": "gulp-expressjs-nodemon-browser-sync",
"version": "0.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"author": {
"name": "Hafiz Ismail",
"email": "",
"url": ""
"license": "ISC",
"dependencies": {
"express": "^4.8.2"
"devDependencies": {
"browser-sync": "^1.3.3",
"gulp": "^3.8.7",
"gulp-nodemon": "^1.0.4"
/* some css */
/* put this under /public/* */
body {
font-family: 'Helvetica';
color: red;
Copy link

Nice job, thx!

Copy link

Works great! Thx!

Copy link

Works great! Thx!

Copy link

Works great! Thx!

Copy link

Does someone knows how to change the default behaviour of browser-sync which automatically delivers index.html as the root directory?
I tried changing that behaviour by simply defining a route inside my app.js but somehow it gets ignored.

Copy link

binler commented Mar 7, 2018

Nice job, but i have a question?
It's just working when i access http://localhost:3000, when I access http://localhost:3000/users it not working, help me?

Copy link

danielchikaka commented Aug 28, 2018

Looks promising but it breaks after running for the first time with this error:

Error: listen EADDRINUSE :::5000

at Object._errnoException (util.js:1022:11)

at _exceptionWithHostPort (util.js:1044:20)

at Server.setupListenHandle [as _listen2] (net.js:1351:14)

at listenInCluster (net.js:1392:12)

at Server.listen (net.js:1476:7)

at Function.listen (C:\xampp\htdocs\ndondo\aug2018\jobBoard\node_modules\express\lib\application.js:618:24)

at Object.<anonymous> (C:\xampp\htdocs\ndondo\aug2018\jobBoard\index.js:36:5)

at Module._compile (module.js:643:30)

at Object.Module._extensions..js (module.js:654:10)

at Module.load (module.js:556:32)

[18:01:36] [nodemon] app crashed - waiting for file changes before starting

Any ideas why ?

Copy link

Heres a 2019 way of setting up the gulpfile since that code no longer works for running multiple tasks

const gulp = require("gulp");
const browserSync = require("browser-sync");
var nodemon = require("gulp-nodemon");

gulp.task("nodemon", cb => {
  let started = false;

  return nodemon({
    script: "server.js"
  }).on("start", () => {
    if (!started) {
      started = true;

  gulp.series("nodemon", () => {
    browserSync.init(null, {
      proxy: "http://localhost:7000",
      files: ["public/**/*.*"],

      port: 9000

gulp.task("serve", gulp.series("browser-sync", () => {}));

Copy link

Thanks @Dmitri801, works great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment