こんにちは、外部ライターの田路です。
春の足音がどんどん大きくなってきていますね。
春といえば卒業の季節です。
今回はパッケージマネージャーBowerとGulpを組み合わせて、ファイルのコピペを卒業する方法をご紹介いたします。
使うための準備
- jQueryとBootstrapを例に進めていきます
- BowerとGulpを使います
「フロントエンド用パッケージマネージャーBowerの導入方法と使い方」を参考に、Bowerの基本的な使い方を理解しておいてください。
「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を参考に、Gulpへの入門を済ませておいてください。
黒い画面が苦手なあなたへ
- bower-browser – これは便利!Bower管理フロントエンド
http://www.moongift.jp/2015/02/bower-browser-これは便利!bower管理フロントエンド/
上の記事を参考にしてbower-browserを使えば、ブラウザでBowerの管理ができるようになります。
Bowerでダウンロードしたライブラリから必要なJSファイルのみ抽出し結合する
まずはダウンロードします。
bower install --save
デフォルトの設定ではbower_conpornentsフォルダが作成され、bower.jsonに記述してあるライブラリ情報を元にライブラリがダウンロードされます。
このままではHTML側の読み込む際、
<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>
といった具合に1ファイルずつ読み込むことになります。
httpリクエストも増えますし、できれば任意のフォルダにライブラリファイルを置いておきたいですよね?
そこで使うのがGulpです。
Gulpを使って、bower.jsonで管理されているライブラリ情報を使ってダウンロードしたファイルを結合させてみましょう。
ただし、JS、CSSともに結合する順番に気をつけていないと、スクリプトエラーとなったりスタイルを打ち消してしまうので注意してください。
必要なJSファイルのみ抽出し結合させる
bower_conpornentsフォルダから、
- jquery.min.js
- bootstrap.min.js
この2つのJSファイルを取り出し、lib.jsファイルという名前で1ファイルにします。
そのとき、必要なGulpのプラグインは以下です。
- gulp-filter
- main-bower-files
- gulp-concat
Gulpのタスクは以下のようにしてください。(CoffeeScriptで記述してあります)
gulp = require 'gulp'
bower = require 'main-bower-files'
concat = require 'gulp-concat'
filter = require 'gulp-filter'
gulp.task 'BowerJS', ->
jsFilter = filter '**/*.js'
gulp
.src bower()
.pipe jsFilter
.pipe concat 'lib.js'
.pipe gulp.dest 'javascripts/source/'
つづいて、Gulpに設定したBowerJSタスクを実行します。
gulp BowerJS
javascripts/sourceディレクトリにlib.jsファイルが出来ました!
応用編
何らかの理由で使わないライブラリがある場合は、bower.jsonに以下のように追記してあげると、移動・結合するファイルから無視できます。
"overrides": {
"jquery":
{ "ignore": "true" }
}
Bowerでダウンロードしたライブラリから必要なCSSファイルのみ抽出し結合する
ここまでで、JSの抽出・結合まで説明しましたが、Bootstrapのようにフレームワーク系のライブラリの場合、JSとCSSが依存関係にあるものもありますよね?
次はCSSを任意のフォルダに移動する方法です。
ただし、CSSは使いたいライブラリによって、.scss、.sassなど拡張子が違う場合があるので一手間かけてやる必要があります。
実は上記でもさらっと使っているgulp-filterが良い仕事をしてくれています。
必要なGulpのプラグインは以下です。
- gulp-filter
- main-bower-files
- gulp-rename
Gulpのタスクは以下のようにしてください。(CoffeeScriptで記述してあります)
gulp.task 'BowerCSS', ->
cssFilter = filter '**/*.css'
scssFilter = filter '**/*.scss'
sassFilter = filter '**/*.sass'
gulp
.src bower()
.pipe cssFilter
.pipe rename
prefix: '_'
extname: '.scss'
.pipe gulp.dest 'stylesheets/library/'
.pipe cssFilter.restore()
.pipe scssFilter
.pipe gulp.dest 'stylesheets/library/'
.pipe cssFilter.restore()
.pipe sassFilter
.pipe gulp.dest 'stylesheets/library/'
.pipe cssFilter.restore()
Sassのパーシャル機能で使いたいので、Gulpタスクにリネームと拡張子の書き換えを設定しています。この辺りは、環境に応じて適宜変更してください。
つづいて、Gulpに設定したBowerCSSタスクを実行します。
gulp BowerCSS
`stylesheets/library`ディレクトリに`_bootstrap.scss`ファイルが出来ました!
まとめ
今回の内容はGitHubにアップしています。
ライブラリファイルを任意のフォルダにコピペしないので、bower.jsonどおりにライブラリの管理ができます。良ければ、ご活用ください。
【フロントエンドエンジニアの作業を効率化】
※ エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順
※ フロントエンド用パッケージマネージャーBowerの導入方法と使い方
※ CoffeeScriptで記述量を減らし、スッキリしたソースにする方法
※ Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ
※ 業務で安心して使える厳選AngularJSモジュール8選+α
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。