kevinlinxp
8/10/2014 - 1:27 PM

gulp + expressjs + nodemon + browser-sync

gulp + expressjs + nodemon + browser-sync

site.css
content_copyfile_download
/* some css */
/* put this under /public/* */
body {
    font-family: 'Helvetica';
    color: red;
    font-size:24px;
}
package.json
content_copyfile_download
{
  "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": "hafiz@wehavefaces.net",
    "url": "http://wehavefaces.net"
  },
  "license": "ISC",
  "dependencies": {
    "express": "^4.8.2"
  },
  "devDependencies": {
    "browser-sync": "^1.3.3",
    "gulp": "^3.8.7",
    "gulp-nodemon": "^1.0.4"
  }
}
index.html
content_copyfile_download
<html>
<head>
    <link rel="stylesheet" href="site.css"/>
</head>
<body>
    <!-- some dummy non-conforming quick dirty html code to test browser-sync. dont't judge me. -->
<b>lorem</b> ipsum upsum dumsum
</body>
</html>
<!-- put this under /public/* -->
gulpfile.js
content_copyfile_download
'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) {
			cb();
			started = true; 
		} 
	});
});
app.js
content_copyfile_download
'use strict';

// simple express server
var express = require('express');
var app = express();
var router = express.Router();

app.use(express.static('public'));
app.get('/', function(req, res) {
    res.sendfile('./public/index.html');
});

app.listen(5000);