Bower - A package manager for the web
-
Upload
larry-nung -
Category
Technology
-
view
514 -
download
1
Transcript of Bower - A package manager for the web
BOWER - A PACKAGE MANAGER FOR THE WEBLarry Nung
AGENDAIntroductionInstallBower Commandbower.json.bowerrcLabReferenceQ & AAppendix
2
INTRODUCTION
INTRODUCTION
INSTALL
REQUIREMENT Node.js Git
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
INSTALL Windows
npm install -g bower
BOWER COMMAND
BOWER HELP Function
Display help information about Bower
Usage bower help bower help <command>
Bower help install
BOWER HELP
BOWER INIT Function
Interactively create a bower.json file
Usage bower init
BOWER INIT
BOWER SEARCH Function
Search for a package by name
Usage bower search <package>
bower search jquery
BOWER SEARCH
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
BOWER INSTALL
BOWER UNINSTALL Function
Remove a local package
Usage bower uninstall <package>
bower uninstall jquery
BOWER UNINSTALL
BOWER LIST Function
List local packages - and possible updates
Usage bower list bower list –r bower list -p
BOWER LIST
BOWER LIST
BOWER UPDATE Function
Update a local package
Usage bower update <package>
bower update jquery
BOWER UPDATE
BOWER CACHE Function
Manage bower cache
SubCommand list clean
BOWER CACHE LIST Function
List cached packages
Usage bower cache list
BOWER CACHE LIST
BOWER CACHE CLEAN Function
Clean cached packages
Usage bower cache clean
BOWER CACHE CLEAN
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
BOWER INFO
BOWER INFO
BOWER LOOKUP Function
Look up a package URL by name
Usage bower lookup <name>
bower lookup jquery
BOWER LOOKUP
BOWER PRUNE Function
Removes local extraneous packages
Usage bower prune
BOWER PRUNE
BOWER HOME Function
Opens a package homepage into your favorite browser
Usage bower home <package>
bower home jquery
BOWER VERSION Function
Bump a package version
Usage bower version <version>
bower version v1.0.0 bower patch bower minor bower major
BOWER VERSION
BOWER VERSION
BOWER VERSION
BOWER VERSION
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
BOWER LOGIN Function
Authenticate with GitHub and store credentials
Usage bower login
BOWER UNREGISTER Function
Remove a package from the registry
Usage bower unregister <package>
bower unregister jquery_2.1.4
BOWER LINK Function
Symlink a package folder
BOWER.JSON
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 }
BOWER.JSONName Type Require
dDescription
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 StringString[]
false The entry-point files necessary to use your package.
moduleType StringString[]
false The type of module defined in the main JavaScript file
BOWER.JSONName Type Required Descriptionlicense String
String[]false SPDX license identifier or
path/url to a licenseignore 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
BOWER.JSONName Type Required Descriptiondependencies
Object false Dependencies are specified with a simple hash of package name to a semver compatible identifier or URL
devDependencies
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.
.BOWERRC
.BOWERRC Location
~/bowerrc .bowerrc
.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" ] }
.BOWERRCName Type Descriptionanalytics Boolean Does Bower can collect
anonymous usage statistics?cwd String Current working directorydirectory String The path in which installed
components should be savedregistry Object
StringThe 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
.BOWERRCName Type Descriptiontimeout 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 ObjectString
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.
.BOWERRCName Type Descriptioninteractive 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
LAB
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
LAB2 Install Bootstrap List package Uninstall jQuery List package Update package List package
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
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
REFERENCE63
REFERENCE Bower
http://bower.io/
Bower 管理網站套件的好工具 | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY https://blog.wu-boy.com/2013/01/bower-is-a-pack
age-manager-for-the-web/
Bower 前端套件管理工具 « Eden Tsai http://edentsai231.logdown.com/posts/198741-b
ower-front-end-kit-management-tool64
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/mt5
73714.aspx
Getting Started with Bower - Treehouse Blog http://blog.teamtreehouse.com/getting-started-b
ower 65
REFERENCE Bower 手冊 - iFantasticMe - 博客園
http://www.cnblogs.com/ifantastic/p/4651451.html
[Web]Bower 前端套件管理工具 | 佛祖球球 http://blog.johnsonlu.org/bower-front-end-kit-man
agement-tool/
[Javascript] bower javascript 套件管理工具 初探 - Mr. 一顆痣 a.k.a. bigd - 工程屍的日子 http://iambigd.blogspot.tw/2014/06/javascript-bo
wer-javascript.html 66
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/confi
g.md
Installing Node.js properly on Ubuntu · Steven Lu http://stevenlu.com/posts/2014/04/05/installing-n
odejs-on-ubuntu/ 67
REFERENCE 極客學院
http://e.jikexueyuan.com/invite/invite.html?huodong=invite_www_floating
68
Q&A69
QUESTION & ANSWER
70
APPENDIX
NPM PROXY SETTING npm config set proxy http://127.0.0.1:8080 npm config set https-proxy
https://127.0.0.1:8080
NPM PROXY SETTING
BOWER PROXY SETTING{ "proxy": "http://127.0.0.1:8080", "https-proxy": "https://127.0.0.1:8080", "strict-ssl": false }
BOWER PROXY SETTING
BOWER VAGRANT BOXVagrant.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