Introduction to Express and Grunt

INTRODUCTION TO EXPRESS AND GRUNTJS

Peter deHaan @pdehaan [email protected]

Wednesday, November 6, 13

mailto:[email protected]

mailto:[email protected]

WHAT IS EXPRESS?Fast, unopinionated, minimalist web development framework for

Node.js. Inspired by Ruby’s Sinatra. Insanely fast, flexible, 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 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/


http://expressjs.com

http://expressjs.com

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


http://nodejs.org/

http://nodejs.org/

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 5html 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/


http://gruntjs.com/

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...


https://npmjs.org/browse/depended/grunt




http://gruntjs.com/plugins

http://gruntjs.com/plugins

https://twitter.com/gruntweekly

https://twitter.com/gruntweekly

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!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']);

};


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

Technology

Transcript of Introduction to Express and Grunt