• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Express and Grunt
 

Introduction to Express and Grunt

on

  • 5,539 views

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

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

Statistics

Views

Total Views
5,539
Views on SlideShare
5,539
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Custom Gruntfile copyright task gist: https://gist.github.com/pdehaan/7343753
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Express and Grunt Introduction to Express and Grunt Presentation Transcript

    • 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, 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 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
    • 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 5 html 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