Dependency Management with Bower

Slides from my talk at Forefront.cc in Leeds, there's no slide notes as it was improvised on the day.

Transcript

1. Front-end package management with Bower WARNING: CONTAINS TERMINAL COMMANDS
2. bower.io
3. bit.ly/bowersearch
4. { "name": “my_awesome_project”, "version": "1.0.12", "ignore": [ "**/.*", "node_modules", "libs", "bower_components", "test", "tests" ], "dependencies": { "bootstrap-daterangepicker": "latest", "bourbon": "latest", "console-js": "gh-pages", "font-awesome": "3.2.1", "html5shiv": "latest", "highcharts": "latest", "highlightjs": "latest", "ie7-js": "https://ie7-js.googlecode.com/files/ie7-2.1%28beta4%29.zip", "jquery": "1.x", "jquery-mousewheel": "latest", "moment": "latest", "normalize-css": "latest", "respond": "latest", "requirejs": "latest", "sticky": "latest", "Vague.js": "Stanton/vague.js" }, "devDependencies": { "livereload-js": "livereload/livereload-js", "phantomcss": "latest" } }
5. { "directory" : "libs" } .bowerrc /bower_components
6. $ bower install
7. bower ie7-js#* cached https://ie7-js.googlecode.com/files/ie7-2.1%28beta4%29.zip bower ie7-js#* validate https://ie7-js.googlecode.com/files/ie7-2.1%28beta4%29.zip#* bower Vague.js#* cached git://github.com/Stanton/vague.js.git#0.0.2 bower Vague.js#* validate 0.0.2 against git://github.com/Stanton/vague.js.git#* bower bootstrap-requirejs#* cached git://github.com/danielevigi/bootstrap-requirejs.git#12cdda413f bower bootstrap-requirejs#* validate 12cdda413f against git://github.com/danielevigi/bootstrap-requirejs.git#* bower livereload-js#* cached git://github.com/livereload/livereload-js.git#2.0.8 bower livereload-js#* validate 2.0.8 against git://github.com/livereload/livereload-js.git#* bower font-awesome#3.2.1 cached git://github.com/FortAwesome/Font-Awesome.git#3.2.1 bower font-awesome#3.2.1 validate 3.2.1 against git://github.com/FortAwesome/Font-Awesome.git#3.2.1 bower bootstrap-daterangepicker#* cached git://github.com/dangrossman/bootstrap-daterangepicker.git#06be0e7266 bower bootstrap-daterangepicker#* validate 06be0e7266 against git://github.com/dangrossman/bootstrap- daterangepicker.git#* bower highcharts#* cached git://github.com/ewen/bower-highcharts.git#3.0.7 bower highcharts#* validate 3.0.7 against git://github.com/ewen/bower-highcharts.git#* bower jquery#1.x cached git://github.com/components/jquery.git#1.10.2 bower jquery#1.x validate 1.10.2 against git://github.com/components/jquery.git#1.x bower html5shiv#* cached git://github.com/aFarkas/html5shiv.git#3.7.0 bower html5shiv#* validate 3.7.0 against git://github.com/aFarkas/html5shiv.git#* bower highlightjs#* cached git://github.com/components/highlightjs.git#7.3.0 bower highlightjs#* validate 7.3.0 against git://github.com/components/highlightjs.git#* bower moment#* cached git://github.com/timrwood/moment.git#2.4.0 bower moment#* validate 2.4.0 against git://github.com/timrwood/moment.git#* bower respond#* cached git://github.com/scottjehl/Respond.git#1.3.0 bower respond#* validate 1.3.0 against git://github.com/scottjehl/Respond.git#* bower requirejs#* cached git://github.com/jrburke/requirejs.git#2.1.9 bower requirejs#* validate 2.1.9 against git://github.com/jrburke/requirejs.git#* bower sticky#* cached git://github.com/garand/sticky.git#c199302553 bower sticky#* validate c199302553 against git://github.com/garand/sticky.git#* bower phantomcss#* cached git://github.com/Huddle/PhantomCSS.git#a0e3188322 bower phantomcss#* validate a0e3188322 against git://github.com/Huddle/PhantomCSS.git#* bower jqueryui-touch-punch#* cached git://github.com/furf/jquery-ui-touch-punch.git#72d67b63c9 bower jqueryui-touch-punch#* validate 72d67b63c9 against git://github.com/furf/jquery-ui-touch-punch.git#* bower jquery-mousewheel#* cached git://github.com/brandonaaron/jquery-mousewheel.git#3.1.4 bower jquery-mousewheel#* validate 3.1.4 against git://github.com/brandonaaron/jquery-mousewheel.git#* bower normalize-css#* cached git://github.com/necolas/normalize.css.git#2.1.3 bower normalize-css#* validate 2.1.3 against git://github.com/necolas/normalize.css.git#* bower console-js#gh-pages cached git://github.com/NV/console.js.git#00b30654ac bower console-js#gh-pages validate 00b30654ac against git://github.com/NV/console.js.git#gh-pages bower jquery.ui#* cached git://github.com/jquery/jquery-ui.git#1.10.3 bower jquery.ui#* validate 1.10.3 against git://github.com/jquery/jquery-ui.git#* bower bourbon#* cached git://github.com/thoughtbot/bourbon.git#3.1.8 bower bourbon#* validate 3.1.8 against git://github.com/thoughtbot/bourbon.git#* bower jquery#~1.10 cached git://github.com/components/jquery.git#1.10.2 bower jquery#~1.10 validate 1.10.2 against git://github.com/components/jquery.git#~1.10 bower moment#~2.1 cached git://github.com/timrwood/moment.git#2.1.0 bower moment#~2.1 validate 2.1.0 against git://github.com/timrwood/moment.git#~2.1 bower jquery#>=1.2.2 cached git://github.com/components/jquery.git#2.0.3 bower jquery#>=1.2.2 validate 2.0.3 against git://github.com/components/jquery.git#>=1.2.2
9. <script type="text/javascript" src="/libs/jquery.min.js"></script>
13. { "name": “my_awesome_project”, "version": "1.0.12", "ignore": [ "**/.*", "node_modules", "libs", "bower_components", "test", "tests" ], "dependencies": { "bootstrap-daterangepicker": "latest", "bourbon": "latest", "console-js": "gh-pages", "font-awesome": "3.2.1", "html5shiv": "latest", "highcharts": "latest", "highlightjs": "latest", "ie7-js": "https://ie7-js.googlecode.com/files/ie7-2.1%28beta4%29.zip", "jquery": "1.x", "jquery-mousewheel": "latest", "moment": "latest", "normalize-css": "latest", "respond": "latest", "requirejs": "latest", "sticky": "latest", "Vague.js": "Stanton/vague.js" }, "devDependencies": { "livereload-js": "livereload/livereload-js", "phantomcss": "latest" } }
14. Pauls-MacBook-Pro:pulsar Stanton$ bower search font-awesome Search results: ! font-awesome git://github.com/FortAwesome/Font-Awesome.git components-font-awesome git://github.com/components/font-awesome.git font-awesome-more git://github.com/hectorcenteno/Font-Awesome-More.git
15. Pauls-MacBook-Pro:pulsar Stanton$ bower install angular --save bower angular#* not-cached git://github.com/angular/bow bower angular#* resolve git://github.com/angular/bow bower angular#* download https://github.com/angular/b bower angular#* extract archive.tar.gz bower angular#* resolved git://github.com/angular/bow bower angular#~1.2.0 install angular#1.2.0 ! angular#1.2.0 libs/angular
16. Pauls-MacBook-Pro:pulsar Stanton$ bower list bower check-new Checking for new versions of the project dependencies.. pulsar#1.0.0 /Users/Stanton/Localhost/pulsar ├── Vague.js#0.0.2 ├─┬ bootstrap-daterangepicker#06be0e7266 │ ├── jquery#1.10.2 (latest is 2.0.3) │ └── moment#2.1.0 (latest is 2.4.0) ├── bootstrap-requirejs#12cdda413f extraneous ├── bourbon#3.1.8 ├── console-js#00b30654ac ├── font-awesome#3.2.1 (latest is 4.0.3) ├── highcharts#3.0.7 ├── highlightjs#7.3.0 ├── html5shiv#3.7.0 ├── ie7-js ├── jquery#1.10.2 (latest is 2.0.3) ├─┬ jquery-mousewheel#3.1.4 │ └── jquery#1.10.2 (2.0.3 available) ├── jquery.ui#1.10.3 ├── jqueryui-touch-punch#72d67b63c9 ├── livereload-js#2.0.8 ├── moment#2.1.0 (2.4.0 available) ├── normalize-css#2.1.3 ├── phantomcss#c4c27b220d ├── requirejs#2.1.9 ├── respond#1.3.0 └── sticky#c199302553
17. $ bower update
18. easier installation single command to upgrade git, http(s), zip, npm no messing around with git submodules it’s small easily make your own packages bower compatible
19. Thank you! ! bower.io bit.ly/bowersearch ! @stanton