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で実行したい

 - プログラミング

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

  関連記事

no image
Docker導入したらどうするの?

Dockerを導入したけど、nginxが入った環境がどこでも使えるようになった!程度だったらあんま意味ないよね。 Web開発をする上でDockerをどのように使うのが効果的か考えてみる。 …

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

http://railstutorial.jp/chapters/sign-in-sign-out?version=4.0#top この辺を読んだメモ。 …

no image
GrowthPushのAndroid-SDK(?)のコードを読んでみる

できること、できないことを知るために。 GrowthPush.java …

no image
NginxとPHP-FPMを使っていたらcurl_init()が無いとエラーが出た

参考リンク 解決策 …

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

Contents1 はじめに2 …

ReactなComponent同士を連携させたい

実践的なサンプルに塗れてなんとなく使ってると破綻する。 分かってること、分かってないことを整理しておきたい。 …

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

Modelを作り、コンソール上からデータを追加した。 次はこのデータをlocalhost:3000にアクセスしたときに表示させてみたい。 …

no image
MecabをPythonから使いたい

ベイズ分類器を自分で作りたかった。 そのためには、文書を単語の集合に変換する必要がある。 …

no image
『Tutorial & Hackathon #1』をやってみる

https://pydata.tokyo/news/pydata.tokyo-tutorial-hackathon-1 タイタニックの乗客データから生存者の推定モデルを作成してる。 …

コードを雑に読むアプローチでScrapyを入門する

Scrapyはスクレイピング用フレームワークなので、登場人物多すぎてよく分からない。 彼らの関係性や役割を理解を深めるために『Data …