Bower & Grunt - A practical workflow
-
Upload
riccardo-coppola -
Category
Software
-
view
1.413 -
download
1
description
Transcript of Bower & Grunt - A practical workflow
![Page 1: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/1.jpg)
Bower & GruntA practical workflow
riccardo coppola about.me/riccardocoppola
![Page 2: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/2.jpg)
Manage front end dependencies
Workflow step 1: Bower
![Page 3: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/3.jpg)
What?
![Page 4: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/5.jpg)
Why?
![Page 6: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/8.jpg)
Automate dependency management
That’s it
$ bower install
![Page 9: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/10.jpg)
How?
![Page 11: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/11.jpg)
Install Bower
Bower requires Node, npm and Git.
$ npm install -g bower
![Page 12: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/12.jpg)
Search for a package
bower search <package>
http://bower.io/docs/api/#search
![Page 13: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/16.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/19.jpg)
Scrupulously manage file locations for bower dependencies.
Workflow step 2:grunt-bowercopy
![Page 20: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/21.jpg)
$ npm install grunt-bowercopy --save-dev
https://www.npmjs.org/package/grunt-bowercopy
![Page 22: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/22.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/23.jpg)
Clear files and folders
Workflow step 3:grunt-contrib-clean
![Page 24: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/24.jpg)
$ npm install grunt-contrib-clean --save-dev
https://www.npmjs.org/package/grunt-contrib-clean
![Page 25: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/25.jpg)
grunt/clean.js
{vendor: ["public/css/vendor/*", "public/js/vendor/*"]
}
![Page 26: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/26.jpg)
Everything together
![Page 27: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/27.jpg)
aliases.js
{vendor: ["clean:vendor", "bowercopy:js", "bowercopy:sass"]
}
![Page 28: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/28.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/29.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/30.jpg)
package.json
{ "name": "myApp", "version": "0.1.0", ... "scripts": { "postinstall": "./node_modules/grunt/bin/grunt vendor" }, ...}
![Page 31: Bower & Grunt - A practical workflow](https://reader034.fdocuments.in/reader034/viewer/2022052508/5597b6d21a28aba6038b46c0/html5/thumbnails/31.jpg)
That’s all folks!