Bowerを使ってみたメモ
まず node.js が必要らしい。
最新バージョンのインストーラ http://nodejs.org/dist/v0.10.33/node-v0.10.33-x86.msi を取得して、全部デフォルトのままインストール。パス環境変数への追加なども勝手にやってくれるみたい。
以下、シェルは NYAOS にて。
$ node --version v0.10.33
きたきた。
Bower は node.js のパッケージ管理ツール npm でインストールするそうな。
グローバルにインストール。グローバルって何処?よく分からんけどとりあえずユーザーのホームディレクトリから実行してみた。
$ npm install -g bower C:\Users\k_horii\AppData\Roaming\npm\bower -> C:\Users\k_horii\AppData\Roaming\npm\node_modules\bower\bin\bower bower@1.3.12 C:\Users\k_horii\AppData\Roaming\npm\node_modules\bower ├── is-root@1.0.0 ├── junk@1.0.0 ├── stringify-object@1.0.0 ├── chmodr@0.1.0 ├── abbrev@1.0.5 ├── which@1.0.5 ├── osenv@0.1.0 ├── opn@1.0.0 ├── archy@0.0.2 ├── bower-endpoint-parser@0.2.2 ├── bower-logger@0.2.2 ├── graceful-fs@3.0.4 ├── lru-cache@2.5.0 ├── rimraf@2.2.8 ├── lockfile@1.0.0 ├── retry@0.6.0 ├── nopt@3.0.1 ├── tmp@0.0.23 ├── q@1.0.1 ├── semver@2.3.2 ├── p-throttler@0.1.0 (q@0.9.7) ├── request-progress@0.3.0 (throttleit@0.0.2) ├── shell-quote@1.4.2 (array-filter@0.0.1, array-reduce@0.0.0, array-map@0.0.0, jsonify@0.0.0) ├── bower-json@0.4.0 (intersect@0.0.3, graceful-fs@2.0.3, deep-extend@0.2.11) ├── promptly@0.2.0 (read@1.0.5) ├── mkdirp@0.5.0 (minimist@0.0.8) ├── chalk@0.5.0 (ansi-styles@1.1.0, escape-string-regexp@1.0.2, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0) ├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1) ├── cardinal@0.4.0 (redeyed@0.4.4) ├── bower-registry-client@0.2.1 (lru-cache@2.3.1, async@0.2.10, graceful-fs@2.0.3, request-replay@0.2.0, mkdirp@0.3.5,request@2.27.0) ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6) ├── mout@0.9.1 ├── decompress-zip@0.0.8 (mkpath@0.1.0, nopt@2.2.1, touch@0.0.2, binary@0.3.0, readable-stream@1.1.13) ├── request@2.42.0 (json-stringify-safe@5.0.0, caseless@0.6.0, forever-agent@0.5.2, aws-sign2@0.5.0, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0, mime-types@1.0.2, node-uuid@1.4.1, qs@1.2.2, tough-cookie@0.12.1, form-data@0.1.4, http-signature@0.10.0, hawk@1.1.1, bl@0.9.3) ├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7) ├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0) ├── fstream-ignore@1.0.1 (minimatch@1.0.0, inherits@2.0.1) ├── fstream@1.0.2 (inherits@2.0.1) ├── insight@0.4.3 (object-assign@1.0.0, async@0.9.0, tough-cookie@0.12.1, os-name@1.0.1, chalk@0.5.1, lodash.debounce@2.4.1, configstore@0.3.1, inquirer@0.6.0) ├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, configstore@0.3.1, latest-version@0.2.0) └── inquirer@0.7.1 (figures@1.3.3, mute-stream@0.0.4, through@2.3.6, lodash@2.4.1, readline2@0.1.0, rx@2.3.14, cli-color@0.3.2)
なんだこれ…やたら一杯入ってびびるわ…。
$ bower -v 1.3.12
なんか反応が遅いけど、とりあえずプロジェクトのホームに移動して使ってみる。
$ bower init [?] May bower anonymously report usage statistics to improve the tool over time?
そのまま
? name: (chrony)
現在のディレクトリ名が勝手に入るっぽい。そのまま
? version: (0.0.0)
プロジェクトのバージョン?そのまま
? description:
そのまま
? main file:
そのまま
? what types of modules does this package expose? (Press <space> to select) ( ) amd ( ) es6 ( ) globals ( ) node ( ) yui
何言ってるか分からんがそのまま
? keywords:
そのまま
? authors: (k-holy <k.holy74@gmail.com>)
gitの設定から勝手に取ってくるっぽい?そのまま
license: (MIT)
そのまま
? homepage:
そのまま
? set currently installed components as dependencies?: (Y/n)
はい
? add commonly ignored files to ignore list?: (Y/n)
はい
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)
はい
{ name: 'chrony', version: '0.0.0', authors: [ 'k-holy <k.holy74@gmail.com>' ], license: 'MIT', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ? Looks good? (Y/n)
はい
カレントディレクトリに bower.json が作成された。
jQueryを入れてみる。
$ bower install jquery --save
bower_components 以下に jquery が入った。
bower.jsonは以下の通り。
{ "name": "chrony", "version": "0.0.0", "authors": [ "k-holy <k.holy74@gmail.com>" ], "license": "MIT", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.1.1" } }
で、これどうやってドキュメントルート以下から参照するの…?
.bowerrc 設定ファイルに定義すればインストール先を変更できるらしいので、変えてみる。
一旦 bower_components は削除。
以下の内容で .bowerrc ファイルを作成して…
{ "directory": "public/bower_components" }
再インストール。すでに bower.json に依存は定義されているのでこれでOKかな?
$ bower install bower jquery#~2.1.1 cached git://github.com/jquery/jquery.git#2.1.1 bower jquery#~2.1.1 validate 2.1.1 against git://github.com/jquery/jquery.git#~2.1.1 bower jquery#~2.1.1 install jquery#2.1.1 jquery#2.1.1 public\bower_components\jquery
OK。次は Bootstrap を入れる。
$ bower install bootstrap --save bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#* bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#* bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.3.0.tar.gz bower bootstrap#* extract archive.tar.gz bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.3.0 bower bootstrap#~3.3.0 install bootstrap#3.3.0 bootstrap#3.3.0 public\bower_components\bootstrap └── jquery#2.1.1
テンプレートからの呼び出しはこんな感じに修正する。
<script src="/bower_components/jquery/dist/jquery.min.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
JavaScriptフレームワークとか全然分からん、クソみたいな自作jQueryプラグインで何とかやってる、そんなレベルの自分でも大丈夫でした。
後は、サーバ側にも同じように node.js を入れて bower コマンドを入れて、デプロイ時には bower install すると楽できるというわけですか。
node.js なんてまるで興味ない&特に必要もされていないLAMPおじさんな自分が、そのためだけに node.js を入れるというのは微妙な気がするけども…。
参考にした記事