componentを使った開発で便利なサードパーティ制サブコマンド

componentを使った開発で個人的にcoolだと感じたサブコマンド一覧。

component-graph

component なモジュールの依存関係をグラフとして表示します。どう依存しているのかグラフで分かりやすい。

$ component graph

上記コマンドを実行すると、out.pngが出力される。out.png はこんな感じ。

component-assets

javascript、CSS、imageファイルといったassetsなファイルたちを以下のようなコマンドを実行するだけで、component.json に追加してくれます。

$ component assets scripts:*.js styles:*.css

いちいち Editor で開かなくても追加してくれるので便利。

component-update

依存モジュールをアップデートすることができます。

$ component update

    updated : component/jquery       1.8.8  ->  1.9.1
    updated : component/tip          0.2.0  ->  1.0.0
    updated : ianstormtaylor/reset   0.1.0  ->  0.2.0

--pin を指定して実行することでバージョンを固定できます。

$ component update --pin

    updated : component/each             *  ->  0.2.3
    updated : component/model            *  ->  0.1.2
    updated : component/jquery       1.8.8  ->  1.9.1
    updated : component/tip          0.2.0  ->  1.0.0
    updated : ianstormtaylor/reset   0.1.0  ->  0.2.0

component-uninstall

なぜか、本家の方にはアンインストールするコマンドがない。下記の用にコマンドを実行するとインストールされたcomponentsからアンインストールされる。

$ component uninstall component/each
  uninstalled : component/each

component-remove

component.json から指定したファイルを削除することができます。指定したファイルも削除されます。

$ component remove index.js
    removed : index.js
    deleted : index.js

ファイルをキープしたい場合は、--keep-file のオプションを指定します。

$ component remove index.js --keep-file
    removed : index.js

component-test

browser、phantomjs、saucelabs、Travisでテストを走らせることができる。

component-render

自分が作成した、テンプレートファイルからHTMLファイルを生成するコマンド。

下記のように利用する。

    # redner html file from template file
    $ component render simple.jade

    # render html file from template file with local json file
    $ component render -l user.json user.jade

    # render html file to output path
    $ component render -o ./static/html/simple.html simple.jade

component-rednerはデフォルトJadeなテンプレートに対応しているが、下記のようにプラグインを指定することで他のテンプレートにも対応できる。

    # render html file with plugin
    $ component render -u component-render-hogan -l user.json user.mustache

参考

Commands
https://github.com/component/component/wiki/Commands