Grunt and Bower - Basics

1. <Insert Picture Here>
JavaScript Build Process

2. Topics
•
•
2
Grunt
Bower
Oracle Restricted and Confidential

3. Grunt

4. Grunt
•
•
Is an npm module: “npm install –g grunt-cli”
•
Installing grunt-cli does not install the Grunt task runner.
•
4
JavaScript Task Runner. Analogous to ANT.
Grunt CLI only runs the version of Grunt which has been
installed next to a Gruntfile. This allows multiple versions
of Grunt to be installed on the same machine
simultaneously.
Oracle Restricted and Confidential

5. Grunt
•
Basic Grunt Project setup
•
•
5
package.json: Used by npm to store metadata for. You
will list grunt and the Grunt plugins as devDependencies
in this file.
Gruntfile: This file is named Gruntfile.js and is used to
configure or define tasks and load Grunt plugins.
Oracle Restricted and Confidential

6. <Insert Picture Here>
GRUNT DEMO

7. Bower

8. Bower
•
•
Also an npm module: “npm install –g bower”
•
Bower registry: http://sindresorhus.com/bower-components/
•
8
Package manager for web apps.
To configure an existing project, add bower.json to the root folder.
Oracle Restricted and Confidential

9. Bower
Where <package> can be any one of the following:
•
•
Git endpoint: remote or local.
•
A shorthand endpoint, e.g., someone/some-package (defaults to
GitHub).
•
9
Registered package, e.g, jquery.
A URL to a file, including zip and tar files
Oracle Restricted and Confidential

10. <Insert Picture Here>
BOWER DEMO