Overview
This post is all about continuous development using NodeJS and Express 4. I’m going to be basing this post off of this blog post.
Step 1: Installation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# global
npm install -g express
npm install -g express-generator
npm install -g grunt-cli
# create express app with EJS for template, Less for css and a .gitignore file
express -e -c less --git
touch Gruntfile.js
# dev
npm install --save-dev grunt
npm install --save-dev load-grunt-tasks
npm install --save-dev grunt-contrib-watch
npm install --save-dev grunt-nodemon
npm install --save-dev grunt-concurrent
Explanation
load-grunt-tasks: will be used to load all the grunt tasks right away.
grunt-contrib-watch: will allow us to watch for file changes and execute grunt tasks.
grunt-nodemon: we will use it to reload the server when a file changes.
grunt-concurrent: watch has livereload built in, so we want to be able to reload the page and restart server automatically.
Structure
The directory should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── Gruntfile.js
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.less
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.ejs
└── index.ejs
Step 2: Setup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// ### in Gruntfile.js ###
'use strict';
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
grunt.initConfig({
watch: {
livereload: {
options: {
livereload: true
},
files: [
'public/**/*.{less,js}',
'views/**/*.ejs'
]
}
}, // End watch
nodemon: {
dev: {
options: {
nodeArgs: ['--debug'],
file: '--debug ./bin/www'
}
}
}, //End nodemon
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon:dev']
}
}, // End concurrent
});
grunt.registerTask('default', ['concurrent:dev']);
};
Step 3: Dev
Now you can simply call grunt and the server will start up. When you make a change to a file and save, it will refresh the page.