パッケージマネージャーBowerとGulpを組み合わせてコーディングを効率化させる方法

田路竜士

2015.03.20

こんにちは、外部ライターの田路です。
春の足音がどんどん大きくなってきていますね。
春といえば卒業の季節です。

今回はパッケージマネージャー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タスクを実行します。