実践！BowerとGulpで楽してウェブ開発

2016/05/27

ウェブ業界情報技術者ブログ

2017/10/05 更新
bower-check-updatesはDeprecatedで、代わりにncuを使うべき
とのことなので、bowerの最新パッケージ確認方法を更新しました。

2016/06/03 お詫び
Gulpの導入手順が若干間違っていました。初期化の手順をすっ飛ばしておりました。ごめんなさい！現在は正しいものに書き換えてあります。

楽して暮らそう

「楽して」でググると夢のような言葉がいっぱい出てきます。
楽して稼ぐ、楽して痩せる、楽して英語を身につける…どれもお金をふんだくられて終わりそうですが、今回は楽してウェブ開発をする方法のご紹介です。

BowerとかGulpとか、ウェブ界隈の方なら聞いたことも多いかと思いますが、要するにウェブ開発で面倒なことを手抜きするための道具です。最初はちょっと面倒ですが、設定さえ済んでしまえば相当楽することができますので、ご興味あればご一読ください。

いろんな前提

「爆速開発！」とか「10倍速い！」とかBowerやGulpで検索するといくらでも記事が見つかるのですが、うまく動かなかったりいろんな記事をたらい回しにされたり、爆速開発どころか10倍ストレスで爆発フィニッシュされる方も多くいらっしゃると伺っております。

今回は「どうやってインストールして」「どうやって使って」「結局何が嬉しいのか」「これは何でこうなの？」といった実践的な内容を全部まとめて書いていきたいと思います。それぞれの仕組みやら用語解説やら詳しいことは、他の優秀な記事にお任せします（最後に参考リンクもまとめました）。

実践！と謳っているからには、以下のような初心者向けの前提も書いておきます。何を今さら！と感じた方はこの章はすっ飛ばしてください。

Mac向けの記事です

Windows環境についてはなかったことにしています。基本は同じだと思いますが、Mac前提なのでもしうまくいかないことがあればごめんなさい。

タスケテ！ Macなのにエラーが出るときは、須藤さんにお願いするとうまくいくかもしれません。

$ sudo npm install -g bower

須藤さんの正体はSuper User DOってことですが、コマンドの頭につけます。例えば上のように。コマンドって何？ドルマーク$は何？と思った方は以下を続けてご覧ください。

ターミナルを使います

この記事ではあらゆる場面で、Macに最初から入っているターミナルというアプリを使います。
トムハンクスの映画ではありません。以下のような表示があったらそれはターミナルにコマンド（命令語）を入力せよという意味です。

$ echo hello, Tom!

頭のドルマークはコマンドだよ！という意味なので、打ってはいけません。上の場合 echo hello, Tom! と入力します。自信がない方は基本的なターミナルの使い方を知っておくと良いです。

問答無用でnode.jsを入れておいてください

BowerもGulpもnode.jsがないと動きません。でも、冷凍食品を食べるのに電子レンジの詳しい仕組みを知っておく必要はありません。
世の中そういうことなのです。言ってしまえばnode.jsについては僕も良く分かっていません。

ヤメトケ！ node.jsを入れるにはhomebrewかnodebrewを使うと管理が楽です。homebrewはOS X用の汎用パッケージマネージャで、nodebrewはnode.js専用のパッケージマネージャです。

オススメ！面倒なことに巻き込まれたくない方は、素直にオフィシャルサイトからダウンロードして入れましょう。

node.jsが無事インストールされていれば、以下のコマンドでバージョンが表示されます。

$ node -v

Bowerを使ってみよう！

Bowerはフロントエンド用のパッケージマネージャで、要するにbootstrapとかjqueryとか、ウェブ関係のいろんなライブラリやリソース（=パッケージ）を管理するための道具です。それぞれのバージョンをインストールしたり、アップデートしたり、チームで共有したりといったことが簡単になります。Bowerについて詳しくはこちらの優秀な記事をご覧ください。

グローバルにインストール

さあカタカナが増えてまいりましたよ。まずはグローバルといって、どの場所からでも実行できるようにするようにインストールします。

$ npm install -g bower

npmはnode package manager、-gはglobalを表しています。つまりnode.jsのパッケージマネージャを使ってbowerというパッケージマネージャを入れるわけですね！なんてこった！

ちなみに npmではinstallはiと略記できますので、

$ npm i -g bower

としても同じことです。

初期ファイルの生成

まずはbowerを導入したいプロジェクトのディレクトリ（例：~/sites/aloha）に移動！cdはチェンジディレクトリです。

$ cd ~/sites/aloha

bowerの初期設定をします。init=initialize：初期化です。

$ bower init

名前とかバージョンとかいろいろ聞かれますが、全部適当に答えましょう。全部エンターとはい、で大丈夫です。これでbower.jsonというファイルが作成されます。bowerを使ってインストールしたパッケージの情報を書いておくためのファイルです。

好きなものを入れよう

なんでもいいのですが、パッケージ名 “bootstrap” ならこんな感じで入ります。

$ bower install --save bootstrap

bower_componentsというディレクトリが生成され、その中にパッケージの実データが入ります。
パッケージはBowerのオフィシャルサイトで探せます。jquery関係とかfontawesomeとか、大抵のものはありますよ！

オススメ！ –save と書いておけば、インストールしたパッケージの情報がdependencies（依存するリソース）として自動的にbower.jsonに書き込まれます。

ちなみに –saveは-Sに短縮できます！

Gulpを使ってみなよ！

昔のウェブ開発は単純でした。htmlと、cssと少しのjavascript、jpg画像を組み合わせればできあがりです。それが今はどうでしょう。sassのコンパイル、画像の圧縮、javascriptやcssの圧縮、スマホでの動作確認、やりたいことがいっぱいです。

そういう面倒なタスクをコマンド一発でやってくれるのが、タスクランナーと呼ばれるものでGulpはその一つです。もっと詳しくはこちらのよくできた記事をご覧ください。

さて導入手順はBowerとほぼ一緒なので、ちゃっちゃといきましょう。

グローバルにインストール

$ npm i -g gulp

bowerと変わりませんね。

初期ファイルの生成

先ほどと同じく、まずGulpを導入したいプロジェクトのディレクトリに移動しておいてから、下記のコマンドで初期化します。

$ npm init

gulpというコマンドを打つわけではないことに注意してください。npmです。bowerの時と同じように対話が始まりますので、また適当に答えましょう。真面目に答えてもいいですけど。これでpackage.jsonというファイル（bowerでいうbower.json）が作成されます。

好きなものを入れよう

まずはgulp本体を入れましょう。以下のコマンドで、node_modulesというディレクトリ（bowerでいうbower_components）の中にプラグインが入ります。

$ npm i --save-dev gulp

–save-devでpackage.jsonに情報が追記されます。

bowerの時は–saveだったのになぜ–save-dev？

それはね –saveがプロダクション（本番）の依存リソースを保存するというオプションだったのに対し、–save-devを付けると「開発時」に必要なリソースとして保存されます。bootstrapやfontawesomeは本番でも必要ですが、画像の圧縮とかsassのコンパイルとかが必要なのは開発時だけですよね。だからgulpでは–save-devとすることが多いのです。

ちなみに –save-devは-Dに短縮できます！

ここで残念なお知らせですが、実はgulpだけでは何もしてくれません。その代わり、先ほど挙げたようなタスクを実行してくれるプラグインがたくさん用意されています。

例としてgulp-imageminを入れてみます。GIF,JPEG,PNG,SVG画像を劣化させず圧縮してくれるプラグインです。

$ npm i -D gulp-imagemin

gulpでは各プラグインもこのようにnpmでインストールします。

もうひと踏ん張り

さてgulpのプラグイン、入れたのはいいものの実際どうやって使うのかというと…

まずgulpfile.jsというファイルを下記のように用意します。


// gulp本体とgulp-imageminプラグインの読み込み
var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');

// ソースと公開ディレクトリのパスを変数に入れておく
var
    source = 'src/', // ソースディレクトリ
    dist = 'dist/'; // 公開ディレクトリ

// 画像を圧縮するタスク
gulp.task('imagemin', function(){ //imageminという名前のタスクを作る
    // ソースのimagesディレクトリの画像を登録して
    return gulp.src(source + 'images/*.{gif,jpg,png,svg}')
        .pipe(imagemin()) // 圧縮！
        .pipe(gulp.dest(dist + 'images/')); // 公開ディレクトリのimageに置く
        // 作業はこうして.pipeを使って継ぎ足していく
});

いきなりなんだこれは！と思われたかもしれませんが、ただのjsファイルです。必要なプラグインを読み込んで、そのプラグインを使ったタスクが書かれているだけです。難しいことはありません。

楽する時がやってきた

それでは重たい画像を放り込んだsrc/imagesと空のdist/imagesディレクトリを作っておき、次のようにタスクを実行してみましょう。

$ gulp imagemin

なにやら表示されますね。さあdist/imagesをチェックしてください。軽くなった画像ができているはずです！

他のおすすめプラグインや、gulp.watchを使った監視（例えば、imagesに画像が放り込まれたら自動的に圧縮タスクを実行）についてはまた今度ということで…

次からはもっと楽！

あるプロジェクトのbower.json / package.jsonが既に存在すれば、下記のようにコマンド一つで必要なパッケージ / gulpプラグインを復元可能です。

$ bower i

$ npm i

jsonの内容に沿ってインストールするので、オプションは不要です。めちゃくちゃ簡単ですね。

gulpのプラグインはnpm-check-updatesを使うと簡単にアップデートできます。まずグローバルにインストールします。

$ npm i -g npm-check-updates

あとはローカル（プロジェクトのディレクトリ）で各プラグインの最新バージョンをチェック。

$ ncu

package.jsonのアップデートはこうします。

$ ncu -u

実際にパッケージをアップデートするには以下を実行してください。

$ npm update

bowerもncuでオプションを指定すれば、同じように最新バージョンをチェックできます。

$ ncu -m bower

開発チームではどこまで共有する？

結論から言えば、bower_componentsやnode_modulesは不要です。上記のようにbower.json / package.jsonさえあれば環境を復元できます。プロジェクトを共有する場合は注意してください。gulpfile.jsはもちろん共有しましょう。

さらにその先へ

BowerとGulpを組み合わせればもっと実用的な作業を効率化できます。例えば下のように。

Bower bootstrap（sass版）、fontawesomeを入れる。
Gulp jsファイルやfontファイルをソースディレクトリにコピーしてくる。
Gulp sassファイルは他のsassと一緒にコンパイルしてcssにし、ソースディレクトリに置く。jsも他のjsファイルとまとめる。
Gulp cssやjsを圧縮して、公開ディレクトリにコピーする。

上記Gulpの部分で必要なプラグインと、タスクの書き方についてはまた次回ご紹介します！
今回はこのへんで！

参考リンク

今さら聞けない！ターミナルの使い方【初心者向け】
http://techacademy.jp/magazine/5155
Node.js
https://nodejs.org/
Homebrew
http://brew.sh/index_ja.html
Nodebrew
https://github.com/hokaccha/nodebrew
Bower入門(基礎編)
http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308
Search Bower Package
http://bower.io/search/
5分で導入！タスクランナーGulpでWeb制作を効率化しよう
https://ics.media/entry/3290
gulp.js plugin registry
http://gulpjs.com/plugins/
npm-check-updates
https://github.com/tjunnone/npm-check-updates