Upload
peter-dehaan
View
133
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Quick introduction to using Express and Grunt with Node.js.
Citation preview
INTRODUCTION TO EXPRESS AND GRUNTJS
Peter deHaan @pdehaan [email protected]
Wednesday, November 6, 13
WHAT IS EXPRESS?Fast, unopinionated, minimalist web development framework for
Node.js. Inspired by Ruby’s Sinatra. Insanely fast, flexible, and simple.
Wednesday, November 6, 13
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 specific 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/
Wednesday, November 6, 13
GETTING STARTED1. 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
Wednesday, November 6, 13
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.
Wednesday, November 6, 13
COOL STORY, BRO!
$ tree.├── app.js├── package.json├── public/│ ├── images/│ ├── javascripts/│ └── stylesheets/│ └── style.css├── routes/│ ├── index.js│ └── user.js└── views/ ├── index.jade └── layout.jade
Wednesday, November 6, 13
SAMPLE PACKAGE.JSON
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.4",
"jade": "*"
}
}
Wednesday, November 6, 13
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 5html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content
Wednesday, November 6, 13
OK, I’M BORED ALREADY, LETS LOOK AT CODE
Wednesday, November 6, 13
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/
Wednesday, November 6, 13
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...
Wednesday, November 6, 13
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.
Wednesday, November 6, 13
AUTOMATE ALL THE THINGS!Wednesday, November 6, 13
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']);
};
Wednesday, November 6, 13
ZZZZZZZ.....Shut up and show me some code already!
Wednesday, November 6, 13
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']);};
Wednesday, November 6, 13
CONCLUSION express is a great way to quickly prototype dynamic Node.js based websites.
grunt is pretty awesome, use it.
Wednesday, November 6, 13