読者です 読者をやめる 読者になる 読者になる

k-holyのPHPとか諸々メモ

Webで働くk-holyがPHP(スクリプト言語)とか諸々のことをメモしていきます。ソースコードはだいたいWindowsで動かしてます。

Bowerを使ってみたメモ

Windows JavaScript

まず 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 を入れるというのは微妙な気がするけども…。

参考にした記事