bower & grunt - a practical workflow

31
Bower & Grunt A practical workflow riccardo coppola about.me/riccardocoppola

Upload: riccardo-coppola

Post on 04-Jul-2015

1.407 views

Category:

Software


1 download

DESCRIPTION

A practical workflow using Bower and Grunt that keeps your vendor folder clean, copies your assets in different locations and makes your dependency management an easy task.

TRANSCRIPT

Page 1: Bower & Grunt - A practical workflow

Bower & GruntA practical workflow

riccardo coppola about.me/riccardocoppola

Page 2: Bower & Grunt - A practical workflow

Manage front end dependencies

Workflow step 1: Bower

Page 3: Bower & Grunt - A practical workflow

What?

Page 4: Bower & Grunt - A practical workflow

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Page 5: Bower & Grunt - A practical workflow

Why?

Page 6: Bower & Grunt - A practical workflow

Declutter your lib/vendor folder

Too often we end up with 5 different versions of the same library (jQuery is an always-working example...).

Which one are we actually using?

Page 7: Bower & Grunt - A practical workflow

Dependency management

No more downloads from ten different websites to get your dependencies.

No more version mismatch problems.

Page 8: Bower & Grunt - A practical workflow

Automate dependency management

That’s it

$ bower install

Page 9: Bower & Grunt - A practical workflow

vs

● Flexible: install from Bower

registry, GitHub, zip, fs location

● created solely for the front-end

and optimized with that in mind

● flat dependency tree (just one

lib for each type), good for

front-end related stuff

● Most commonly used for

managing Node.js modules

● works for the front-end too when

combined with Browserify

● nested dependency tree (size

heavy), good for server side

modules

Page 10: Bower & Grunt - A practical workflow

How?

Page 11: Bower & Grunt - A practical workflow

Install Bower

Bower requires Node, npm and Git.

$ npm install -g bower

Page 12: Bower & Grunt - A practical workflow

Search for a package

bower search <package>

http://bower.io/docs/api/#search

Page 13: Bower & Grunt - A practical workflow

Install a package

# registered package (specific version)

$ bower install jquery#1.2.3

# GitHub shorthand$ bower install desandro/masonry

# Git endpoint$ bower install git://github.com/user/package.git

# URL$ bower install http://example.com/script.jsv

http://bower.io/docs/api/#install

Page 14: Bower & Grunt - A practical workflow

Maintaining dependencies

# install package and add it to bower.json dependencies

$ bower install <package> --save

# install package and add it to bower.json devDependencies

$ bower install <package> --save-dev

Page 15: Bower & Grunt - A practical workflow

bower.json (bower.json : bower = package.json : npm)

{ "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" }}

Page 16: Bower & Grunt - A practical workflow

Is it enough?

Bower is just a tool, helps us organize front end dependencies and keeps track of versions.

Page 17: Bower & Grunt - A practical workflow

What we get

➔ CSS and JS in the same folder

➔ docs/ tests/ src/ minified versions and sourcemaps

are all not needed

➔ Bower components folder can grow if not cleaned

Page 18: Bower & Grunt - A practical workflow

What we want

➔ separated vendor folders for CSS and JS

➔ single, non minified version of every lib, nothing else

➔ clean vendor folder containing just used libs and only

one version

Page 19: Bower & Grunt - A practical workflow

Scrupulously manage file locations for bower dependencies.

Workflow step 2:grunt-bowercopy

Page 20: Bower & Grunt - A practical workflow

Why

➔ Consistently positions your dependencies where you

want them in your repository.

➔ Conveniently facilitates tracking your dependencies

without committing the entire Bower components folder.

➔ Has the potential to reduce build times dramatically.

➔ By default, runs bower install for you

Page 21: Bower & Grunt - A practical workflow

$ npm install grunt-bowercopy --save-dev

https://www.npmjs.org/package/grunt-bowercopy

Page 22: Bower & Grunt - A practical workflow

grunt/bowercopy.js

js: { options: { destPrefix: 'public/js/vendor }, files: { 'jquery.js': 'jquery/jquery.js', 'require.js': 'requirejs/require.js' },},sass: { options: { destPrefix: 'public/css/vendor }, files: { 'bootstrap': 'bootstrap-sass-official/bootstrap.js' },},...

Page 23: Bower & Grunt - A practical workflow

Clear files and folders

Workflow step 3:grunt-contrib-clean

Page 24: Bower & Grunt - A practical workflow

$ npm install grunt-contrib-clean --save-dev

https://www.npmjs.org/package/grunt-contrib-clean

Page 25: Bower & Grunt - A practical workflow

grunt/clean.js

{vendor: ["public/css/vendor/*", "public/js/vendor/*"]

}

Page 26: Bower & Grunt - A practical workflow

Everything together

Page 27: Bower & Grunt - A practical workflow

aliases.js

{vendor: ["clean:vendor", "bowercopy:js", "bowercopy:sass"]

}

Page 28: Bower & Grunt - A practical workflow

If you commit your dependencies1. .gitignore the Bower component folder

2. Add a hook on git pre-commit and run ‘grunt

vendor’ as part of your pre-commit workflow

3. Push your public/css/vendor & public/js/vendor

Page 29: Bower & Grunt - A practical workflow

If you DO NOT commit your dependencies

1. .gitignore the Bower component folder,

public/css/vendor & public/js/vendor

2. Have your CI run ‘npm install’ as first step of the front

end workflow

3. Modify your package.json

Page 30: Bower & Grunt - A practical workflow

package.json

{ "name": "myApp", "version": "0.1.0", ... "scripts": { "postinstall": "./node_modules/grunt/bin/grunt vendor" }, ...}

Page 31: Bower & Grunt - A practical workflow

That’s all folks!