Bower - A package manager for the web

1. BOWER -
A PACKAGE MANAGER FOR THE WEB
Larry Nung

2. AGENDA
Introduction
Install
Bower Command
bower.json
.bowerrc
Lab
Reference
Q & A
Appendix
2

3. INTRODUCTION

4. INTRODUCTION

5. INSTALL

6. REQUIREMENT
 Node.js
 Git

7. INSTALL
 Linux
 Ubuntu
 sudo apt-get purge nodejs npm
 sudo apt-get update
 sudo apt-get install -y python-software-properties python g++
make
 sudo add-apt-repository ppa:chris-lea/node.js
 sudo apt-get update
 sudo apt-get install -y nodejs
 sudo apt-get install -y git
 sudo npm install -g bower

8. INSTALL
 Windows
 npm install -g bower

9. BOWER COMMAND

10. BOWER HELP
 Function
 Display help information about Bower
 Usage
 bower help
 bower help <command>
 Bower help install

11. BOWER HELP

12. BOWER INIT
 Function
 Interactively create a bower.json file
 Usage
 bower init

13. BOWER INIT

14. BOWER SEARCH
 Function
 Search for a package by name
 Usage
 bower search <package>
 bower search jquery

15. BOWER SEARCH

16. BOWER INSTALL
 Function
 Install a package locally
 Usage
 bower install
 bower install <package>
 bower install bootstrap spine jquery
 bower install <package>#<version>
 bower install jquery-ui#1.10.4
 bower install https://github.com/jquery/jquery.git#2.0.3
 bower install <package> --save

17. BOWER INSTALL

18. BOWER UNINSTALL
 Function
 Remove a local package
 Usage
 bower uninstall <package>
 bower uninstall jquery

19. BOWER UNINSTALL

20. BOWER LIST
 Function
 List local packages - and possible updates
 Usage
 bower list
 bower list –r
 bower list -p

21. BOWER LIST

22. BOWER LIST

23. BOWER UPDATE
 Function
 Update a local package
 Usage
 bower update <package>
 bower update jquery

24. BOWER UPDATE

25. BOWER CACHE
 Function
 Manage bower cache
 SubCommand
 list
 clean

26. BOWER CACHE LIST
 Function
 List cached packages
 Usage
 bower cache list

27. BOWER CACHE LIST

28. BOWER CACHE CLEAN
 Function
 Clean cached packages
 Usage
 bower cache clean

29. BOWER CACHE CLEAN

30. BOWER INFO
 Function
 Info of a particular package
 Usage
 bower info <package>
 bower info bootstrap
 bower info <package>#<version>
 bower info jquery#1.0.1

31. BOWER INFO

32. BOWER INFO

33. BOWER LOOKUP
 Function
 Look up a package URL by name
 Usage
 bower lookup <name>
 bower lookup jquery

34. BOWER LOOKUP

35. BOWER PRUNE
 Function
 Removes local extraneous packages
 Usage
 bower prune

36. BOWER PRUNE

37. BOWER HOME
 Function
 Opens a package homepage into your favorite browser
 Usage
 bower home <package>
 bower home jquery

38. BOWER VERSION
 Function
 Bump a package version
 Usage
 bower version <version>
 bower version v1.0.0
 bower patch
 bower minor
 bower major

39. BOWER VERSION

40. BOWER VERSION

41. BOWER VERSION

42. BOWER VERSION

43. BOWER REGISTER
 Function
 Register a package
 Usage
 bower register <name> <endpoint>
 bower register jquery_2.1.4
https://github.com/jquery/jquery.git#2.1.4

44. BOWER LOGIN
 Function
 Authenticate with GitHub and store credentials
 Usage
 bower login

45. BOWER UNREGISTER
 Function
 Remove a package from the registry
 Usage
 bower unregister <package>
 bower unregister jquery_2.1.4

46. BOWER LINK
 Function
 Symlink a package folder

47. BOWER.JSON

48. BOWER.JSON
{
"name": "blue-leaf",
"description": "Physics-like animations for pretty particles",
"main": [ "js/motion.js", "sass/motion.scss" ],
"dependencies": {
"get-size": "~1.2.2",
"eventEmitter": "~4.2.11"
},
"devDependencies": {
"qunit": "~1.16.0"
},
"moduleType": [ "amd", "globals", "node" ],
"keywords": [ "motion", "physics", "particles" ],
"authors": [ "Betty Beta " ],
"license": "MIT",
"ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ],
"private": true
}

49. BOWER.JSON
Name Type Required Description
name String true The name of the package
as stored in the registry
description String false The description of the
package as stored in the
registry
version String false Use git or svn tags instead.
This field is ignored by
Bower
main String
String[]
false The entry-point files
necessary to use your
package.
moduleType String
String[]
false The type of module defined
in the main JavaScript file

50. BOWER.JSON
Name Type Required Description
license String
String[]
false SPDX license identifier or
path/url to a license
ignore String[] false A list of files for Bower to
ignore when installing your
package
keywords String[] false Used for search by keyword
authors String[]
Object[]
false A list of people that authored
the contents of the package
homepage String false URL to learn more about the
package
repository Object false The repository in which the
source code can be found

51. BOWER.JSON
Name Type Required Description
dependencies Object false Dependencies are specified
with a simple hash of
package name to a semver
compatible identifier or URL
devDependenc
ies
Object false Dependencies that are only
needed for development of
the package
resolutions Object false Dependency versions to
automatically resolve with if
conflicts occur between
packages
private Boolean false If set to true, Bower will
refuse to publish it.

52. .BOWERRC

53. .BOWERRC
 Location
 ~/bowerrc
 .bowerrc

54. .BOWERRC
{
"analytics": true,
"cwd": "~/.my-project",
"directory": "bower_components",
"registry": "https://bower.herokuapp.com",
"shorthand-resolver": "git://github.com/{{owner}}/{{package}}.git",
"proxy": "http://proxy.local",
"https-proxy": "https://proxy.local",
"ca": "/var/certificate.pem",
"color": true,
"timeout": 60000,
"storage": {
"packages" : "~/.bower/packages",
"registry" : "~/.bower/registry",
"links" : "~/.bower/links"
},
"interactive": true,
"resolvers": [ "mercurial-bower-resolver" ],
"shallowCloneHosts": [ "myGitHost.example.com" ]
}

55. .BOWERRC
Name Type Description
analytics Boolean Does Bower can collect anonymous
usage statistics?
cwd String Current working directory
directory String The path in which installed
components should be saved
registry Object
String
The registry config
shorthand-resolver String Define a custom template for
shorthand package names
proxy String The proxy to use for http requests
https-proxy String The proxy to use for https requests
user-agent String Sets the User-Agent for each
request made

56. .BOWERRC
Name Type Description
timeout Number The timeout to be used when
making requests in milliseconds,
defaults to 60000 ms.
strict-ssl Boolean Whether or not to do SSL key
validation when making requests via
https
ca Object
String
The CA certificates to be used
color Boolean Enable or disable use of colors in
the CLI output. Defaults to true.
storage Object Where to store persistent data, such
as cache, needed by bower.
tmp String Where to store temporary files and
folders.

57. .BOWERRC
Name Type Description
interactive Boolean Makes bower interactive, prompting
whenever necessary. Defaults
to null which means auto.
resolvers Array List of Pluggable Resolvers to use
for locating and fetching packages
shallowCloneHosts Array Bower's default behavior is to not
use shallow cloning

58. LAB

59. LAB1
 Search jQuery package
 Look up jQuery package's info
 List bower's cache
 Look up jQuery package's info which version is
2.1.4
 Clear bower's cache
 List bower's cache
 Install jQuery with version 2.1.4
 List package
 List bower's cache

60. LAB2
 Install Bootstrap
 List package
 Uninstall jQuery
 List package
 Update package
 List package

61. LAB3
 Init bower.json
 Install d3 with version 1.0.0 and let it save to
bower.json
 List package
 Open bower.json and change d3's version to 3.5.12
 Update package
 List package

62. LAB4
 Init bower.json
 Open bower.json and add jQueryUI package with
version 1.11.4
 Open bower.json and add AngularJS package with
version 1.4.8
 Install package from bower.json
 List package

63. REFERENCE
63

64. REFERENCE
 Bower
 http://bower.io/
 Bower 管理網站套件的好工具 | 小惡魔 - 電腦技術 -
工作筆記 - AppleBOY
 https://blog.wu-boy.com/2013/01/bower-is-a-package-
manager-for-the-web/
 Bower 前端套件管理工具 « Eden Tsai
 http://edentsai231.logdown.com/posts/198741-bower-
front-end-kit-management-tool
64

65. REFERENCE
 The Will Will Web | 如何在強制使用代理伺服器的環
境下設定 git, npm, bower, gem, ionic 工具
 http://blog.miniasp.com/post/2015/09/03/proxy-settings-
for-git-npm-bower-gem-ionic.aspx
 Visual-Bower Studio: 網頁程式開發的現代化工具
 https://msdn.microsoft.com/zh-
tw/magazine/mt573714.aspx
 Getting Started with Bower - Treehouse Blog
 http://blog.teamtreehouse.com/getting-started-bower
65

66. REFERENCE
 Bower 手冊- iFantasticMe - 博客園
 http://www.cnblogs.com/ifantastic/p/4651451.html
 [Web]Bower 前端套件管理工具 | 佛祖球球
 http://blog.johnsonlu.org/bower-front-end-kit-
management-tool/
 [Javascript] bower javascript套件管理工具 初探 - Mr.
一顆痣 a.k.a. bigd - 工程屍的日子
 http://iambigd.blogspot.tw/2014/06/javascript-bower-
javascript.html
66

67. REFERENCE
 spec/json.md at master · bower/spec
 https://github.com/bower/spec/blob/master/json.md
 spec/config.md at master · bower/spec
 https://github.com/bower/spec/blob/master/config.md
 Installing Node.js properly on Ubuntu · Steven Lu
 http://stevenlu.com/posts/2014/04/05/installing-nodejs-
on-ubuntu/
67

68. REFERENCE
 極客學院
 http://e.jikexueyuan.com/invite/invite.html?huodong=invi
te_www_floating
68

69. Q&A
69

70. QUESTION & ANSWER
70

71. APPENDIX

72. NPM PROXY SETTING
 npm config set proxy http://127.0.0.1:8080
 npm config set https-proxy https://127.0.0.1:8080

73. NPM PROXY SETTING

74. BOWER PROXY SETTING
{
"proxy": "http://127.0.0.1:8080",
"https-proxy": "https://127.0.0.1:8080",
"strict-ssl": false
}

75. BOWER PROXY SETTING

76. BOWER VAGRANT BOX
Vagrant.configure(2) do |config|
config.vm.box = "precise64"
config.vm.box_url = "http://files.vagrantup.com/precise64.box"
config.vm.provision "file", source: ".bowerrc", destination: "bowerrc"
config.vm.provision "file", source: ".npmrc", destination: ".npmrc"
config.vm.provision "shell", inline: $script
end
$script = <<SCRIPT
sudo apt-get purge nodejs npm
sudo apt-get update
sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install -y nodejs
sudo apt-get install -y git
sudo npm install -g bower
SCRIPT