Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Express and Grunt

10,357 views

Published on

Quick introduction to using Express and Grunt with Node.js.

Published in: Technology

Introduction to Express and Grunt

  1. 1. INTRODUCTION TO EXPRESS AND GRUNTJS Peter deHaan @pdehaan pdehaan@mozilla.com Wednesday, November 6, 13
  2. 2. 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
  3. 3. 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
  4. 4. 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 Wednesday, November 6, 13
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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 Wednesday, November 6, 13
  9. 9. OK, I’M BORED ALREADY, LETS LOOK AT CODE Wednesday, November 6, 13
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. AUTOMATE ALL THE THINGS! Wednesday, November 6, 13
  14. 14. 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
  15. 15. ZZZZZZZ..... Shut up and show me some code already! Wednesday, November 6, 13
  16. 16. 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
  17. 17. CONCLUSION express is a great way to quickly prototype dynamic Node.js based websites. grunt is pretty awesome, use it. Wednesday, November 6, 13

×