いまさらBower入門 - エンジニアうまの日記

Gulpでタスクも自動化したところで、Cocoapodsのようにライブラリも管理したくなった。
そのため、いまさらBowerに手を出しました。

Bowerとは？

Twitter社製のフロントエンド用のパッケージマネージャー

なにができるのか？

・ライブラリのインストール
・ライブラリのバージョン管理
・管理するライブラリを減らすなど。
いちいちライブラリをDLする作業がなくなるのは非常に良いことです。

Bowerのインストール

Node.jsをインストールした後、Bowerをグローバルインストールします。

npm install bower -g

Bower init

プロジェクトフォルダのルートまで移動して、Bower initしましょう。

cd PROJECT_ROOT_PATH
bower init

したらば、npm initと同様に対話形式で話が進みます。
質問内容は以下のリンクを参考にしたら良いと思います。

qiita.com

bower.json

npmのpackage.jsonと同様にbower.jsonがフォルダに確認できます。

jQueryのバージョン2系をインストール

私がフロントエンジニアを離れているうちにjQueryもいつのまにか2が・・・。
ということでjQueryの2系をbowerを使ってインストールしてみます。

bower install jquery#2 --save

--saveをつけておくとbower.jsonにdependencies(依存関係)が追記されます。
bower.json内に dependencies が記述されていれば、
指定しなくとも「bower install」だけでライブラリがインストールされる。

--save-devと--saveの違いについては、以下のリンクをご参考に。 nakagaw.hateblo.jp 開発に必要な物は--save-dev、
プロジェクトの実行に必要なものは--save
という関係だけ覚えておけば問題ない気もする。

読み込もう

下のように書いて読み込みこんでもいいと思います。

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

しかし、なんかイケてない感がある方は gulpを利用して、以下のように一つにまとめてlib.jsなんかに書き出しとかしたいと思います。

<script type="text/javascript" src="/js/lib.js"></script>

Gulp + Bowerだ！

もう散々色んな所で紹介されているのではしょります。僕はこんな感じでbower_componentsの中をまとめてます。

gulp.task('bower', function(callback) {
  return runSequence(
    'concat.bower',
    'minify.bower',
    callback
  );
})

var files = mainBowerFiles()
gulp.task('concat.bower', function() {
  console.log(files)
  return gulp.src(files)
    .pipe(concat('lib.js'))
    .pipe(gulp.dest('_build/tmp/js'))
})

gulp.task('minify.bower', function() {
  return gulp.src('_build/tmp/js/lib.js')
    .pipe(plumber({
      errorHandler: notify.onError('<%= error.message %>')
    }))
    .pipe(uglify({preserveComments: 'license'}))
    .pipe(gulp.dest('./js'));
})

ソースはこちら

github.com