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はしているものとする。
1 2 3 4 5 6 7 8 9 |
var mainBowerFiles = require('main-bower-files'); var concat = require('gulp-concat'); gulp.task('default', function() { gulp.src(mainBowerFiles()) .pipe(concat('awesome_concat.js')) .pipe(gulp.dest('./app/scripts')); }); |
こんな感じ。
これでapp/scriptsフォルダにawesome_concat.jsが生成されている。
このファイルをhtmlで読みこめばOK
bower install すらgulpで実行したい
336px
336px
関連記事
-
-
開発で詰まったときにググるキーワード
そも …
-
-
Ruby,Railsのチートシート
こう …
-
-
Docker導入したらどうするの?
Do …
-
-
RDSの特定のデータベースをダンプする
Pu …
-
-
goで無限ループ
しょ …
- PREV
- 開発で詰まったときにググるキーワード
- NEXT
- AngularJS再入門メモ