2014/02/11

Bowerとgulp-bowerでフロントエンド向けライブラリを管理する

Bowerとgulpを組み合わせて使うことでフロントエンド向けライブラリを管理できるようにしてみる、ということで、Bowerの簡単な使いかたとgulpでの利用方法について簡単に説明します。

なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。

Bowerの導入とパッケージインストール

Bowerはnpmでインストールします。

?
1
npm install -g bower

コマンドbowerの基本的な使いかたは、npmと同じです。まず、bower initで初期化しておきます。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
> bower init
[?] name: sample
[?] version: 0.0.0
[?] description:
[?] main file:
[?] keywords:
[?] authors: Safx
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
 
{
  name: 'sample',
  version: '0.0.0',
  authors: [
    'Safx'
  ],
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}
 
[?] Looks good? Yes

これで、bower.jsonができています。これは、npmのpackage.jsonみたいなものです。

?
1
2
> ls
bower.json

次に入れたいパッケージを入れます。ここでは、jQueryとjQueryUIを入れました。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
> bower install --save jquery jquery-ui
bower jquery-ui#*           not-cached git://github.com/components/jqueryui.git#*
bower jquery-ui#*              resolve git://github.com/components/jqueryui.git#*
bower jquery#*              not-cached git://github.com/components/jquery.git#*
bower jquery#*                 resolve git://github.com/components/jquery.git#*
bower jquery-ui#*             download https://github.com/components/jqueryui/archive/1.10.3.tar.gz
bower jquery#*                download https://github.com/components/jquery/archive/2.1.0.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/components/jquery.git#2.1.0
bower jquery-ui#*              extract archive.tar.gz
bower jquery-ui#*             resolved git://github.com/components/jqueryui.git#1.10.3
bower jquery#>=1.6              cached git://github.com/components/jquery.git#2.1.0
bower jquery#>=1.6            validate 2.1.0 against git://github.com/components/jquery.git#>=1.6
bower jquery#>=1.6             install jquery#2.1.0
bower jquery-ui#~1.10.3        install jquery-ui#1.10.3
 
jquery#2.1.0 bower_components/jquery
 
jquery-ui#1.10.3 bower_components/jquery-ui
└── jquery#2.1.0

bower_componentsというディレクトリができて、その中にパッケージがインストールされています。

?
1
2
> ls bower_components
jquery/     jquery-ui/

gulp-bower-filesの導入

さて、ここからが本題です。bower_componentsあたりにBower経由でインストールされたパッケージがあるので、そのライブラリ群をgulpで扱えるようなタスクを作りましょう。

まず、プラグインgulp-bower-filesを導入します。

?
1
npm install --save-dev gulp-bower-files

このプラグインとは別に、gulp-bowerというプラグインもあります。

gulp-bowerはBowerパッケージに含まれるファイルをまるごと取得し、gulp-bower-filesは.bower.jsonのmainに書かれたファイルのみを取得するみたいなので、利用状況に応じて使い分けるとよいでしょう。

今回の利用ではファイルのみが欲しかったのでgulp-bower-filesを利用しています。

あとは、gulpfile.coffeeに次のように書くだけです。

?
1
2
3
4
5
bower = require 'gulp-bower-files'
 
gulp.task 'bower', ->
  bower()
    .pipe (gulp.dest 'lib')

これで実行すると、ファイルがコピーされていることがわかります。

?
1
2
3
4
> gulp bower
> find lib -type f
lib/jquery/jquery.js
lib/jquery-ui/ui/jquery-ui.js

ただし、このままだとファイル構成がフラットでなかったり、uglifyされていなかったりします。

そこで、gulp-flattenで構成をフラットにして、gulp-uglifyでuglifyをします。

なお、uglifyではpreserveComments:'some'を付けることで、ライセンス表記は残すようにしています。

?
1
2
3
4
5
6
7
8
9
flatten = require 'gulp-flatten'
uglify = require 'gulp-uglify'
cond   = require 'gulp-if'
 
gulp.task 'bower', ->
  bower()
    .pipe cond isRelease, uglify({preserveComments:'some'})
    .pipe flatten()
    .pipe (gulp.dest 'lib')

なお、condあたりについては以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。

これで、構成がフラットになり、かつオプション--releaseを付けたときにuglifyされているライブラリが得られるようになります。

?
1
2
3
> gulp bower --release
> ls lib
jquery-ui.js    jquery.js

また、bowerタスクをdefaultタスクに組み込んでおけば、後でbowerで追加されたライブラリも自動でlibに入るようになります。

おわりに

Bowerの簡単な使いかたとgulpでの利用方法について紹介しました。

関連リンク

ラベル: , ,

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)