Grunt and Bower

10
<Insert Picture Here> JavaScript Build Process

description

Grunt and Bower - Basics

Transcript of Grunt and Bower

Page 1: Grunt and Bower

<Insert Picture Here>

JavaScript Build Process

Page 2: Grunt and Bower

2 Oracle Restricted and Confidential2 Oracle Restricted and Confidential

Topics• Grunt• Bower

Page 3: Grunt and Bower

Grunt

Page 4: Grunt and Bower

4 Oracle Restricted and Confidential

Grunt• JavaScript Task Runner. Analogous to ANT.

• Is an npm module: “npm install –g grunt-cli”

• Installing grunt-cli does not install the Grunt task runner.

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

Page 5: Grunt and Bower

5 Oracle Restricted and Confidential

Grunt• Basic Grunt Project setup

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

Page 6: Grunt and Bower

GRUNT DEMO

<Insert Picture Here>

Page 7: Grunt and Bower

Bower

Page 8: Grunt and Bower

8 Oracle Restricted and Confidential

Bower• Package manager for web apps.

• Also an npm module: “npm install –g bower”

• Bower registry: http://sindresorhus.com/bower-components/

• To configure an existing project, add bower.json to the root folder.

Page 9: Grunt and Bower

9 Oracle Restricted and Confidential

Bower

Where <package> can be any one of the following:

• Registered package, e.g, jquery.

• Git endpoint: remote or local.

• A shorthand endpoint, e.g., someone/some-package (defaults to GitHub).

• A URL to a file, including zip and tar files

Page 10: Grunt and Bower

BOWER DEMO

<Insert Picture Here>