posts/Bower.mdwn

   1 [Bower][] is a package manager for the user-facing website content
   2 (JavaScript, CSS, media, …).  It's less JavaScript focused than
   3 [[Jam]], so it can't compile optimized JavaScript.  That's not a big
   4 loss though, because you can always use the [RequireJS
   5 optimizer][optimizer] directly.
   6
   7 Following the [docs][] (with my already-configured [[`~/.local`
   8 prefix|Node]]):
   9
  10     $ npm install -g bower
  11
  12 Install some stuff in your project:
  13
  14     $ bower install bootstrap d3 requirejs
  15
  16 This automatically installs dependencies like [jQuery][], as you'd
  17 expect from a package manager:
  18
  19     $ bower list
  20     bower check-new     Checking for new versions of the project dependencies..
  21     tmp /tmp
  22     ├─┬ bootstrap#3.0.0 extraneous
  23     │ └── jquery#2.0.3
  24     ├── d3#3.3.4 extraneous
  25     └── requirejs#2.1.8 extraneous
  26
  27 The package tree is flat:
  28
  29     $ ls bower_components/
  30     bootstrap  d3  jquery  requirejs
  31
  32 Unlike [[Jam]], you get a whole host stuff along with the JavaScript.
  33
  34     $ tree bower_components/boostrap
  35     bower_components/bootstrap/
  36     ├── …
  37     ├── LICENSE
  38     ├── README.md
  39     ├── …
  40     ├── assets
  41     │   ├── css
  42     │   │   └── …
  43     │   ├── ico
  44     │   │   └── …
  45     │   └── js
  46     │       └── …
  47     ├── …
  48     ├── dist
  49     │   ├── css
  50     │   │   └── …
  51     │   ├── fonts
  52     │   │   └── …
  53     │   └── js
  54     │       ├── bootstrap.js
  55     │       └── bootstrap.min.js
  56     ├── examples
  57     │   ├── carousel
  58     │   │   ├── carousel.css
  59     │   │   └── index.html
  60     │   └── …
  61     ├── fonts
  62     │   └── …
  63     ├── getting-started.html
  64     ├── index.html
  65     ├── javascript.html
  66     ├── js
  67     │   └── …
  68     ├── less
  69     │   └── …
  70     └── package.json
  71
  72 That's a lot of stuff!  Define your dependencies for reuse with a
  73 [bower.json][] file:
  74
  75     {
  76       "name":  "myproject",
  77       "version": "0.0.1",
  78       "dependencies": {
  79         "bootstrap": "3.0.0",
  80         "d3": "3.3.4",
  81         "requirejs": "latest"
  82       }
  83     }
  84
  85 Now that you've listed the dependencies, Bower no longer thinks they
  86 are “extraneous”:
  87
  88     $ bower list
  89     bower check-new     Checking for new versions of the project dependencies..
  90     myproject#0.0.1 /tmp
  91     ├─┬ bootstrap#3.0.0
  92     │ └── jquery#2.0.3
  93     ├── d3#3.3.4
  94     └── requirejs#2.1.8
  95
  96
  97 [Bower]: http://bower.io/
  98 [docs]: http://bower.io/#installing-bower
  99 [optimizer]: http://requirejs.org/docs/optimization.html
 100 [jQuery]: http://jquery.com/
 101 [bower.json]: http://bower.io/#defining-a-package
 102
 103 [[!tag tags/programming]]
 104 [[!tag tags/tools]]
 105 [[!tag tags/web]]