Introduction to Express and Grunt

INTRODUCTION TO EXPRESS
AND GRUNTJS
Peter deHaan @pdehaan pdehaan@mozilla.com

Wednesday, November 6, 13

WHAT IS EXPRESS?
Fast, unopinionated, minimalist web development framework for
Node.js. Inspired by Ruby’s Sinatra. Insanely fast, ﬂexible, and simple.

WHY EXPRESS?
•

Express is fast, lightweight, and... does nothing.

•

You only include the features that you need, and Express doesn’t
force you to use speciﬁc databases or frameworks.

•

5th most depended upon Node.js module.

•

Over 1900 Node.js modules use express.

•

173k downloads last week.

•

More info at http://expressjs.com/


GETTING STARTED
1. Install Node.js: http://nodejs.org/
2. Install express module via npm (you only need to do this once):
$ [sudo] npm install express -g

3. Create a new express application named “hello-world”:
$ express hello-world

4. Install all the Node.js dependencies:
$ cd hello-world && npm install

5. Run the application:
$ node app

CONGRATS YOU’RE NOW A
WEB DEVELOPER!
•

By default express created 6
directories, 7 files.

•

After `npm install`
(which installs all
dependencies)... 234
directories, 979 files. npm
creates a /node_modules/
directory w/ 227
subdirectories and 972 files
for all the required modules.


COOL STORY, BRO!
$ tree
.
├── app.js
├── package.json
├── public/
│
├── images/
│
├── javascripts/
│
└── stylesheets/
│
└── style.css
├── routes/
│
├── index.js
│
└── user.js
└── views/
├── index.jade
└── layout.jade

SAMPLE PACKAGE.JSON
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.4",
"jade": "*"
}
}


WAIT. WHAT?
NO! OH
COME ON!
By default, express uses the Jade templating language
(which is a crime against /(read|us)ability/i). Although
there are lots of other templating languages that you
can use instead (ie: ejs, handlebars, hogan, etc):
doctype 5
html
head
title= title
link(rel='stylesheet', href='/
stylesheets/style.css')
body
block content

OK, I’M BORED ALREADY, LETS
LOOK AT CODE


GRUNT - THE JAVASCRIPT
TASK RUNNER
•

The greatest thing to happen
to Node.js since npm.

•

Like Ant, but better!

•

Built using Node.js/JavaScript,
so it’s “easy” to pick up and
extend and write your own
custom tasks.

•

More info at http://gruntjs.com/


GRUNT: BY THE NUMBERS
•

4th most starred module on npm.

•

26th most depended upon Node.js module.

•

52k downloads from npm last week. 258k downloads in the last month. It’s kind of
a big deal.

•

At least 443 modules in npm are dependent on Grunt. https://npmjs.org/browse/
depended/grunt. Grunt maintains a better list at http://gruntjs.com/plugins. You can
also follow newly updated grunt- packages from npm via Twitter: @gruntweekly.

•

The Grunt core team maintains about 35 ‘official’ plugins, including ones for
CoffeeScript, Sass/Compass, compressing files/folders, concatenating files, copying
files/folders, linting/minifyng CSS/JavaScript, running test suites, blah blah blah...


HOW DO I EVEN?
Grunt is made up of a few different pieces:
1. $ npm install grunt-cli -g: Installs the grunt CLI globally.
2. $ npm install grunt: Installs the grunt task runner into current
project.
3. $ npm install grunt-{packages}: Installs grunt plugins into
current project.
4. Create a Gruntfile.js which defines your tasks.
5. Run `grunt` from the same directory as your Gruntfile.js file and specify
optional build targets.

AUTOMATE ALL THE THINGS!

SAMPLE GRUNTFILE.JS
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
// [snip-snap]
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['jshint', 'nodeunit']);
};


ZZZZZZZ.....
Shut up and show me some code already!

CREATING CUSTOM TASKS
// Impossible to read code snippet ahoy!
module.exports = function (grunt) {
grunt.initConfig({
copyright: {
files: [
"**/*.js",
"!**/node_modules/**"
],
options: {
pattern: "This Source Code Form is subject to the terms of the Mozilla Public"
}
}
});
grunt.registerMultiTask('copyright', 'Copyright all the things!', function () {
var pattern = this.options().pattern;
var files = this.filesSrc.map(function (file) {
return {
"name": file,
"txt": grunt.file.read(file, "utf8")
};
}).filter(function (file) {
return !file.txt.match(pattern);
});
if (files.length) {
grunt.log.subhead("The following files are missing copyright headers:");
files.forEach(function (file) {
grunt.log.warn(file.name);
});
return false;
}
});
grunt.registerTask('default', ['copyright']);
};


CONCLUSION
express is a great way to quickly prototype dynamic Node.js based websites.
grunt is pretty awesome, use it.

Introduction to Express and Grunt

Recommended

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Introduction to Express and Grunt (20)

Recently uploaded (20)

Introduction to Express and Grunt