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