From: W. Trevor King <wking@tremily.us>
Date: Thu, 12 Dec 2013 18:17:38 +0000 (-0800)
Subject: posts:bower: Add a post on Bower
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=d73f85ea119f1402ac263cefd684bd5d961c2a19;p=blog.git

posts:bower: Add a post on Bower
---

diff --git a/posts/Bower.mdwn b/posts/Bower.mdwn
new file mode 100644
index 0000000..2231005
--- /dev/null
+++ b/posts/Bower.mdwn
@@ -0,0 +1,105 @@
+[Bower][] is a package manager for the user-facing website content
+(JavaScript, CSS, media, …).  It's less JavaScript focused than
+[[Jam]], so it can't compile optimized JavaScript.  That's not a big
+loss though, because you can always use the [RequireJS
+optimizer][optimizer] directly.
+
+Following the [docs][] (with my already-configured [[`~/.local`
+prefix|Node]]):
+
+    $ npm install -g bower
+
+Install some stuff in your project:
+
+    $ bower install bootstrap d3 requirejs
+
+This automatically installs dependencies like [jQuery][], as you'd
+expect from a package manager:
+
+    $ bower list
+    bower check-new     Checking for new versions of the project dependencies..
+    tmp /tmp
+    ├─┬ bootstrap#3.0.0 extraneous
+    │ └── jquery#2.0.3
+    ├── d3#3.3.4 extraneous
+    └── requirejs#2.1.8 extraneous
+
+The package tree is flat:
+
+    $ ls bower_components/
+    bootstrap  d3  jquery  requirejs
+
+Unlike [[Jam]], you get a whole host stuff along with the JavaScript.
+
+    $ tree bower_components/boostrap
+    bower_components/bootstrap/
+    ├── …
+    ├── LICENSE
+    ├── README.md
+    ├── …
+    ├── assets
+    │   ├── css
+    │   │   └── …
+    │   ├── ico
+    │   │   └── …
+    │   └── js
+    │       └── …
+    ├── …
+    ├── dist
+    │   ├── css
+    │   │   └── …
+    │   ├── fonts
+    │   │   └── …
+    │   └── js
+    │       ├── bootstrap.js
+    │       └── bootstrap.min.js
+    ├── examples
+    │   ├── carousel
+    │   │   ├── carousel.css
+    │   │   └── index.html
+    │   └── …
+    ├── fonts
+    │   └── …
+    ├── getting-started.html
+    ├── index.html
+    ├── javascript.html
+    ├── js
+    │   └── …
+    ├── less
+    │   └── …
+    └── package.json
+
+That's a lot of stuff!  Define your dependencies for reuse with a
+[bower.json][] file:
+
+    {
+      "name":  "myproject",
+      "version": "0.0.1",
+      "dependencies": {
+        "bootstrap": "3.0.0",
+        "d3": "3.3.4",
+        "requirejs": "latest"
+      }
+    }
+
+Now that you've listed the dependencies, Bower no longer thinks they
+are “extraneous”:
+
+    $ bower list
+    bower check-new     Checking for new versions of the project dependencies..
+    myproject#0.0.1 /tmp
+    ├─┬ bootstrap#3.0.0
+    │ └── jquery#2.0.3
+    ├── d3#3.3.4
+    └── requirejs#2.1.8
+
+
+[Bower]: http://bower.io/
+[docs]: http://bower.io/#installing-bower
+[optimizer]: http://requirejs.org/docs/optimization.html
+[jQuery]: http://jquery.com/
+[bower.json]: http://bower.io/#defining-a-package
+
+[[!tag tags/programming]]
+[[!tag tags/tools]]
+[[!tag tags/web]]