13. “Have you ever seen a great jQuery
plugin and thought to yourself “damn!
I’m using MooTools!” or perhaps the
other way around?”
Thursday, 13 December 12
14. “That highlights the problem right
there, we should have no “jQuery
plugins”, no “Dojo modules”, just simply
“components” that we can all consume.”
Thursday, 13 December 12
15. “Components could then utilize these
smaller, more modular dependencies to
perform tasks.”
Thursday, 13 December 12
16. “Instead of requiring jQuery as a
dependency to convert a string of HTML
into elements, one could simply add
domify as a dependency and invoke
domify(html).”
Thursday, 13 December 12
17. “…ubiquitous libraries like jQuery will
eventually be a thing of the past and
fragmentation will hopefully decrease.”
–
TJ Holowaychuk
Thursday, 13 December 12
35. Built-in Tasks
• concat - • lint - Validate files
Concatenate files. with JSHint.
• min - Minify files
with UglifyJS.
• watch - Run
predefined tasks
whenever watched
files change.
Thursday, 13 December 12
36. Built-in Tasks
• server - Start a • qunit - Run QUnit
static web server. unit tests in a
headless PhantomJS
• init - Generate instance.
project scaffolding
from a predefined • test - Run unit tests
template. with nodeunit.
Thursday, 13 December 12
46. • contrib-clean - • s3 - automate
Clear files and moving files to/from
folders. Amazon S3.
• cp - A Grunt plugin
for copying
directories
(recursively)
• md5 - generate
md5 filename
• shell - Run shell
commands
Thursday, 13 December 12
47. • contrib-handlebars • contrib-jst -
- Precompile Precompile
Handlebars Underscore
templates to JST file. templates to JST file.
• contrib-jade - • mustache -
Compile Jade files to Concatenate
HTML. mustache template
files
• contrib-sass -
Compile Sass to CSS • soy - Grunt task to
compile Soy /
• contrib-less - Closure Templates
Compile LESS files to
CSS. • compass - executes
compass
Thursday, 13 December 12
48. • mocha - Run Mocha
specs
• cucumber - Run
Cucumber.js
• vows - Run vows
tests
• benchmark -
Benchmarking
• strip - Remove
JavaScript
statements (like
console.log) from
your source code
Thursday, 13 December 12
49. • image-embed - • rigger - Rigging
Embed images as tasks for elegant
base64 data URIs includes
inside your
stylesheets.
• smushit - Remove
unnecessary bytes
of PNG and JPG
using Yahoo
Smushit
• willitmerge - Check
if open Github pull
requests are merge-
able.
Thursday, 13 December 12
53. Running "init:gruntplugin" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
"gruntplugin" template notes:
The grunt plugin system is still under development. For more information, see
the docs at https://github.com/cowboy/grunt/blob/master/docs/plugins.md
Please answer the following:
[?] Project name (grunt-plugin)
[?] Description (The best sample grunt tasks ever.)
[?] Version (0.1.0)
[?] Project git repository (git://github.com/timoxley/grunt-plugin.git)
[?] Project homepage (https://github.com/timoxley/grunt-plugin)
[?] Project issues tracker (https://github.com/timoxley/grunt-plugin/issues)
[?] Licenses (MIT)
[?] Author name (Tim Oxley)
[?] Author email (secoif@gmail.com)
[?] Author url (none)
[?] What versions of grunt does it require? (~0.3.9)
[?] What versions of node does it run on? (*)
[?] Do you need to make any changes to the above before continuing? (y/N) N
Writing .npmignore...OK
Writing bin/grunt-plugin...OK
Writing grunt.js...OK
Writing README.md...OK
Writing tasks/plugin.js...OK
Writing test/plugin_test.js...OK
Writing LICENSE-MIT...OK
Initialized from template "gruntplugin".
Done, without errors
Thursday, 13 December 12
54. // Load tasks and helpers from the "tasks" directory, relative to
grunt.js.
grunt.loadTasks('tasks');
// Load tasks and helpers from the "grunt-sample" Npm-installed
grunt plugin.
grunt.loadNpmTasks('grunt-sample');
Thursday, 13 December 12
58. • Concats / Compresses JS
• Concats / Compresses CSS
• Inline CSS imports via RequireJS
• Basic to aggressive html
minification (via [html-minfier][])
• Optimizes JPGs and PNGs (with
jpegtran & optipng)
Thursday, 13 December 12
59. • Renames JS/CSS to prepend a hash
of their contents for easier
versioning
• Revises the file names of your
assets so that you can use heavy
caching
• Updates your HTML to reference
these new hyper-optimized CSS +
JS files
Thursday, 13 December 12
60. • May rerun the build script on file
changes (grunt's watch task ❤)
• May automatically reload the page
in your browsers whenever watched
files change, through some
socket.io magic.
Thursday, 13 December 12
61. node-build-script
+
bower +
more opinions
=
Thursday, 13 December 12
63. By Paul Irish, Addy Osmani, Sindre Sorhus,
Mickael Daniel, Eric Bidelman, and the
Yeoman Community.
Thursday, 13 December 12
64. • HTML5 Boilerplate
• Twitter Bootstrap
• Twitter Bootstrap plugins
• RequireJS
• Support for ES6 Modules
• Wraps bower
Thursday, 13 December 12
65. • Lightning-fast scaffolding — Easily
scaffold new projects with customizable
templates (e.g HTML5 Boilerplate, Twitter
Bootstrap), AMD (via RequireJS) and more.
• Automatically compile CoffeeScript &
Compass — Our LiveReload watch process
automatically compiles source files and
refreshes your browser whenever a change
is made so you don't have to.
Thursday, 13 December 12
66. • Automatically lint your scripts — All your
scripts are automatically run against jshint
to ensure they're following language best-
practices.
• Built-in preview server — No more having
to fire up your own HTTP Server. My built-
in one can be fired with just one command.
• Awesome Image Optimization — I optimize
all your images using OptiPNG and
JPEGTran so your users can spend less time
Thursday, 13 December 12
67. • Integrated package management — Need a
dependency? It's just a keystroke away. I
allow you to easily search for new packages
via the command-line (e.g., yeoman search
jquery), install them and keep them
updated without needing to open your
browser.
• Support for ES6 module syntax —
Experiment with writing modules using the
latest ECMAScript 6 module syntax. This is
an experimental feature that transpiles
back to ES5 so you can use the code in all
Thursday, 13 December 12
68. • PhantomJS Unit Testing — Easily run your
unit tests in headless WebKit via PhantomJS.
When you create a new application, I also
include some test scaffolding for your app.
Thursday, 13 December 12