Bowerとgulpを組み合わせて使うことでフロントエンド向けライブラリを管理できるようにしてみる、ということで、Bowerの簡単な使いかたとgulpでの利用方法について簡単に説明します。
なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。
Bowerの導入とパッケージインストール
Bowerはnpmでインストールします。
npm install -g bower
コマンドbowerの基本的な使いかたは、npmと同じです。まず、bower initで初期化しておきます。
> 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みたいなものです。
> ls bower.json
次に入れたいパッケージを入れます。ここでは、jQueryとjQueryUIを入れました。
> 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というディレクトリができて、その中にパッケージがインストールされています。
> ls bower_components jquery/ jquery-ui/
gulp-bower-filesの導入
さて、ここからが本題です。bower_componentsあたりにBower経由でインストールされたパッケージがあるので、そのライブラリ群をgulpで扱えるようなタスクを作りましょう。
まず、プラグインgulp-bower-filesを導入します。
npm install --save-dev gulp-bower-files
このプラグインとは別に、gulp-bowerというプラグインもあります。
gulp-bowerはBowerパッケージに含まれるファイルをまるごと取得し、gulp-bower-filesは.bower.jsonのmainに書かれたファイルのみを取得するみたいなので、利用状況に応じて使い分けるとよいでしょう。
今回の利用ではファイルのみが欲しかったのでgulp-bower-filesを利用しています。
あとは、gulpfile.coffeeに次のように書くだけです。
bower = require 'gulp-bower-files'
gulp.task 'bower', ->
bower()
.pipe (gulp.dest 'lib')
これで実行すると、ファイルがコピーされていることがわかります。
> 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'を付けることで、ライセンス表記は残すようにしています。
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されているライブラリが得られるようになります。
> gulp bower --release > ls lib jquery-ui.js jquery.js
また、bowerタスクをdefaultタスクに組み込んでおけば、後でbowerで追加されたライブラリも自動でlibに入るようになります。
おわりに
Bowerの簡単な使いかたとgulpでの利用方法について紹介しました。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。