Phoenix frameworkを使ったことがある人なら見たことがあるであろうbrunch。
今回はこのbrunchでbower経由でインストールしたbootstrapを使えるようにしようという話になります。
例としてPhoenix framework上で動作するようにしてみるという前提で書いていきます。
はじめに
brunch-config.jsのfilesフィールドは初め以下のようになっていると思いますが、
files: {
javascripts: {
joinTo: 'js/app.js'
},
stylesheets: {
joinTo: 'css/app.css'
},
templates: {
joinTo: 'js/app.js'
}
},
これのjoinToにvendor.js・vendor.cssを加え、bower_componetsを参照するようにしましょう。
files: {
javascripts: {
joinTo: {
'js/app.js': /^(web\/static\/js)/,
'js/vendor.js': /^bower_components/
},
},
stylesheets: {
joinTo: {
'css/app.css': /^(web\/static\/css)/,
'css/vendor.css': /^bower_components/
}
},
templates: {
joinTo: 'js/app.js'
}
},
これでbower_componentsにあるjs、cssを参照してvendor.js・vendor.cssに結合してくれるようになりました。
しかし、bootstrapの場合これでは動かない箇所があります。
何が動かないのか
それはbootstrapのディレクトリ内にあるfontsにあたる箇所です。
例えばglyphiconなどですね。
では、どうすればbrunchを使って動くようにできるでしょうか？
答えは簡単でプラグインを使いましょう！
brunchのプラグイン
brunchには様々な機能を補填するためにプラグインが作れるようになっています。
このページを見れば存在する代表的なプラグインが一覧で見れます。
プラグインをbrunchに組み込むことでTypeScriptなどのプリコンパイルや、SASSやLESSなどの対応も可能になります。
で、今回はafter-brunchを使いましょう。
このafter-brunchはbrunchによる処理の終了後に行いたい処理を実行させることが出来るプラグインです。
after-brunchを使う
まずは、プラグインのインストールから行いましょう。
$ npm install --save after-brunch
そして、brunch-config.jsを編集します。
今度はpluginsフィールドに追加していきます。
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
// 追加
afterBrunch: [
'mkdir -p priv/static/fonts', // fontsディレクトリを作成して
'cp -f bower_components/bootstrap/dist/fonts/* priv/static/fonts', // bower_componentsからfontsディレクトリにをコピーする
]
},
このように、after-brunchを使って直接fonts内のフォントを移動させてあげるという形になります。
その他にも色々な用途に使える便利なプラグインになっています。
これでglyphiconも使えるようになり、bootstrapの全機能を使うことができるはずです。
この他にもプラグインには様々な便利なプラグインがあるので、是非ともbrunchを使う前に一度覗いてみてください。
※僕はlessプラグインやsassプラグインなど使っています:)