ドジっ娘でもかんたん！Bower × Rails Assets #Rails

フロントエンドまわりのパッケージを管理するBowerですが、JS, HTMLだけでなくCSS, フォントも管理できるそうです。
ということで先日、Webフォント loupe-icon をBower componentとして公開しました。
フォント以外のものを公開するときも参考にできると思います。

また、componentをRails Assetsで使う方法もまとめてみました。

準備

GitHubのリポジトリに、component化したいものが上がっている
npm install bower 済み

Step1. Bower

bower.jsonをつくる

ここでは bower-test という名前のディレクトリで作業することにします。
プロジェクトのディレクトリに移動して

$ cd bower-test
$ bower init

いくつか質問があるので、答えていくと簡単にbower.jsonが生成されます。

? May bower anonymously report usage statistics to improve the tool over time? (Y/n)
# 匿名で統計をとってもいいですか？

? name: (bower-test)
# componentの名前

? version: (0.0.0)
# セマンティックバージョンがいいと思います

参考: http://shijimiii.info/technical-memo/semver/

? description:
# 説明があれば

? main file:
# メインになるファイル名

? what types of modules does this package expose?: (Press <space> to select)
>◯ amd
 ◯ es6
 ◯ globals
 ◯ node
 ◯ yui
# どんなモジュールに公開されますか？（？）
# チェックを付けずにそのままEnter

? keywords:
# キーワードがあれば
# カンマ区切り

? authors: (ユーザ名 <メールアドレス>)
# gitに登録しているユーザ名とメールアドレス

? licence: (MIT)
# ライセンス

? homepage:
# READMEのような解説ページ（？）

? set currently installed components as dependencies?: (Y/n)
# 今インストールされているcomponentの依存ファイルもセットしますか？

? 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)
# 誤ってレジストリに発行されるのを防ぎますか？

? Looks good?: (Y/n)
# 質問から生成された `bower.json` の中身を見せられるので、これでよければ `Y` で確定します。

基本的には(カッコ内のワード)でいいですか？と聞かれるので、問題なければ Enter キーを押します。
ずっと Enter や y でも大丈夫だったりします。

$ ls bower-test
bower.json

$ git add bower.json
$ git commit -m "Add bower.json"
$ git push origin master

無事に生成されました。gitにpushします。

ちなみに、loupe-iconの bower.json はこんな感じです。

bower.json

{
  "name": "loupe-icon",
  "version": "1.0.0",
  "homepage": "https://github.com/lo-upe/loupe-icon",
  "authors": [
    "yamasy1549 <sanae@yamasy.info>"
  ],
  "main": [
    "./css/loupeicons.css",
    "./fonts/*"
  ],
  "license": "MIT",
  "ignore": [
    "*/.*",
    "*.json",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

tagをつける

versionはタグで決まるようなので、タグ名もセマンティックバージョンにしておきます。

$ git tag 0.0.0
$ git push origin --tags

bowerに登録する

$ bower register bower-test git://github.com/ユーザ名/リポジトリ名.git

git:// から始まるURLにしないと怒られるみたいです。
うまくいったか見てみます。

$ bower info component名
$ bower search component名
$ bower install component名

loupe-iconでも確認してみました。

% bower search loupe-icon
Search results:
    loupe-icon git://github.com/lo-upe/loupe-icon.git

% bower info loupe-icon
bower loupe-icon#*              cached git://github.com/lo-upe/loupe-icon.git#0.0.1
bower loupe-icon#*            validate 0.0.1 against git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*                 new version for git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*             resolve git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*            download https://github.com/lo-upe/loupe-icon/archive/1.0.1.tar.gz
bower loupe-icon#*             extract archive.tar.gz
bower loupe-icon#*            mismatch Version declared in the json (1.0.0) is different than the resolved one (1.0.1)
bower loupe-icon#*            resolved git://github.com/lo-upe/loupe-icon.git#1.0.1

{
  name: 'loupe-icon',
  version: '1.0.1',
  homepage: 'https://github.com/lo-upe/loupe-icon',
  authors: [
    'yamasy1549 <sanae@yamasy.info>'
  ],
  main: [
    './css/loupeicons.css',
    './fonts/*'
  ],
  license: 'MIT',
  ignore: [
    '*/.*',
    '*.json',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

Available versions:
  - 1.0.1
  - 1.0.0
  - 0.0.1
  - 0.0.0
You can request info for a specific version with 'bower info loupe-icon#<version>'

このように表示されればOKです。