Grunt and Bower

Post on 27-Jan-2015

104 views 1 download

description

Grunt and Bower - Basics

Transcript of Grunt and Bower

<Insert Picture Here>

JavaScript Build Process

2 Oracle Restricted and Confidential2 Oracle Restricted and Confidential

Topics• Grunt• Bower

Grunt

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.

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.

GRUNT DEMO

<Insert Picture Here>

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.

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

BOWER DEMO

<Insert Picture Here>