moxt

Just another Blog site

Bower再入門

      2015/07/03

Bowerとは何なのか

Bowerとはjavascriptのパッケージ管理システム。
RubyでいうところのBundler。

bower.jsonというファイルにプロジェクトで利用するライブラリを明記しておきbower installを実行するだけで必要なライブラリをダウンロードしてくれる。
このbower.jsonをgitなどのバージョン管理システムで管理しておけば、複数人開発するときにライブラリはこれとこれを入れて…みたいなことを手動で頑張らなくてよい。結果、効率よく開発環境を整えることができる。

Bowerの使い方

たとえばjqueryをダウンロードするなら…

bower install jquery

と書けばよい。

するとbower_componentsというディレクトリが作られ、中にjqueryのディレクトリが作られる。

Bowerでダウンロードしたライブラリを使いたい

真面目にhtml内にscriptタグを書いて、bower_components/jquery/dist/jquery.min.jsとエンドポイントを指定するのもいい。
しかし、手でダウンロードしていた時代と比べ利便性が向上していない気がする。

ここでビルドランナーツールを導入する。

gulpを使う。

https://github.com/ck86/main-bower-files

main-bower-filesはbower_components以下(引数を与えれば任意のディレクトリを指定できる)にインストールされたjsファイル一覧を取得することができる。

ファイル一覧を外部公開用のディレクトリに平置きするだけでは結局たくさんのscriptタグを書かなければならない。
複数のjsファイルを1つのファイルにまとめて、scriptタグを1つだけ書けばOKという状況にしたい。

ペライチのhtmlでページ遷移なんてしないよ、って場合は↑が最適。
ページごとに読み込むjsが違う場合だと1つにまとまってると不都合あるだろう。
平置きしてチクチク読み込むか、htmlごとにまとめたjsファイルを作る感じになると思う。

https://github.com/wearefractal/gulp-concat

gulp-concatを使って複数のjsを1つのファイルにまとめる。
なお、予めbower installはしているものとする。

こんな感じ。
これでapp/scriptsフォルダにawesome_concat.jsが生成されている。
このファイルをhtmlで読みこめばOK

bower install すらgulpで実行したい

 - プログラミング

336px




336px




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  関連記事

no image
Toolbarで表示する矢印アイコンの色を変えたい

http://stackoverflow.com/questions/26788464/how-to-change-color-of-the-back-arrow-in-the-new-material-theme 動的に色を変えるイイカンジな方法が分からず困っていた。 …

no image
RDSの特定のデータベースをダンプする

Publicly Accessibleがyesならどこからでも下記が実行可能。 …

no image
Androidアプリを作るために最低限必要な知識と未知の部分を列挙

作りたいアプリによって必要な知識は変わるかもしれないが。。 個人的過ぎて役に立たないが、整理がてら羅列してみる。 …

no image
フロントエンド開発のメモ

最近のフロントエンド開発ではビルドランナーを使うのが常識になってきてるみたいなので。 jspm的なもっと進んだやり方でも良いんだけど、pluginが少ない、文献が少ない、自身の技術力不足、ということでビルドランナーなやり方でやる。 …

no image
開発で詰まったときにググるキーワード

そもそも公式サイトやソースコード、テストコード、githubなどのissueを読む 基本的には1ヶ月から1年以内の回答しか見ないようにする …

no image
Rubyのモジュール機能とRailsのHelperについて考える

Moduleとは 参考サイトを見ながら思ったことをメモ …

no image
RubyとSeleniumを使って自動で画像をダウンロードする

Contents1 はじめに2 …

no image
意識低いRuby on Rails再入門1

整理がてらメモ。 Contents1 …

no image
Androidアプリを実機デバッグしたいのにNo debuggable applicationsと表示される時の対処例

Tools > …

no image
単語の出現頻度をlinuxコマンドだけで調べたい

無駄にpythonとか使おうとしてた。。 楽にできて良かった。 …