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

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

田路 竜士

田路 竜士

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

今回はパッケージマネージャーBowerとGulpを組み合わせて、ファイルのコピペを卒業する方法をご紹介いたします。

使うための準備

  • jQueryとBootstrapを例に進めていきます
  • BowerとGulpを使います

「フロントエンド用パッケージマネージャーBowerの導入方法と使い方」を参考に、Bowerの基本的な使い方を理解しておいてください。

「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を参考に、Gulpへの入門を済ませておいてください。

黒い画面が苦手なあなたへ

上の記事を参考にして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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

京都でフロントエンドエンジニアをやっています。webで一生食べていけるといいなー、と思っています。よろしゅおすえ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL