Gulp.jsを使ってbundle execする

トップ＞制作・開発＞ Gulp.jsを使ってbundle execする

2015-03-10

Gulp.jsを使ってbundle execする

こんにちは。マークアップのMikaです。

前回、「Foundation 5 のSass版のセットアップについて」お話しましたが、Sass/Compassのバージョンを指定するためにBundlerを使いました。バージョンを指定できるので、環境構築にはとっても便利なBundlerですが、compassのコンパイルにイチイチ「bundle exec compass w」って打たなきゃいけなくて、これちょっと面倒だなぁﾊｧ━(-д-；)━ｧと。

ということで、今回は「タスクランナー」を使ってコーディング⇔ブラウザ確認のもろもろを自動化しちゃいましょう！

タスクランナーって何？

ざっくりと言うと、コーディングしてからブラウザで表示するまでにやりたいこと（タスク）をスクリプトにして書いておくと、まとめてやってくれる便利なものです。例えば、

Sass/Compassのコンパイル
CSSのベンダーprefixを自動付与
JavaScriptのminify
scssファイルが変更されたらブラウザをリロードする

みたいなことを、一気にやってくれるんです。
有名どころではGrunt.jsと今回お話するGulp.jsがあります。Gulpの方が後から出てきたもので、こちらの方が処理が早いと言われています。では、早速やってみましょう。

【今回のタスク】

・Compassをbundle execでコンパイルする
・cssのベンダーprefixをつける
・scssファイルが変更されたら、ブラウザをリロードする

【前提環境】

・Ruby、Node.jsはインストールしておきましょうね。
・Sass、Compassも入れておきましょうね。
・コマンドプロンプトを開いておきましょうね。
　（Windowsベースでお話します）

1.npmの設定ファイルを作る

> cd MY_PROJECT（←プロジェクトフォルダに移動）
> npm init

npmとは「Node Package Manager」の略でnode.jsで作られたパッケージを管理するツールです。

そして、「npm init」はプロジェクトのパッケージを管理する「package.json」というファイルを作るコマンドです。コマンド入力後に対話形式で質問されるので、各項目を入力していくと、package.jsonが出来上がります。ここには、プロジェクト名やバージョン、ライセンスなどを設定するのですが、今回は公開用ではなく、開発環境を作るために使用しますので、すべてEnterキーで進みます。もちろん、あとから編集することもできますよ。

2.gulpをインストール

> npm install --save-dev gulp

「--save-dev」を付けることで、gulpをこのプロジェクト内にインストールします。そして、package.jsonにも、このプロジェクトの開発にはgulpを使いますよ、という記述が追加されます。

3.gulpのプラグインをインストールする

いろいろな処理をするためには、gulpのプラグインが必要です。

> npm install --save-dev gulp-compass
> npm install --save-dev gulp-autoprefixer
> npm install --save-dev gulp-plumber
> npm install --save-dev browser-sync

①gulp-compass
compassのコンパイル用プラグイン。

②gulp-autoprefixer
「Can I use」を元に、必要なベンダーprefixをつけてくれます。
コーディングの時にprefixなしのものだけ書けばいいので、なんて楽！

③gulp-plumber
compassのコンパイル時にエラーがあると、scssの監視が止まっちゃって、gulpのコマンドを打ち直さないといけないのですが、それを止めないようにするプラグイン。

④browser-sync
ブラウザを同期するサーバーを起動。
複数ブラウザの同期ができるので、IEとChromeを同時にリロードなんてこともできます。

プラグインも--save-devオプションを付けているので、package.jsonに書き込まれます。他のPCにこのプロジェクトの環境を構築する場合は、「package.json」を対象のPCにコピーして、

> npm install

と実行すると、あっという間に同じ環境が出来上がり！！

4.gulpfile.jsを作る

さて、準備が整ったので、タスクを定義する「gulpfile.js」ファイルを作っていきましょう。gulpfile.jsはプロジェクトのルートフォルダ（package.jsonがあるとこ）に作成します。書き方は↓な感じ。

①gulpを宣言する
var gulp = require(“gulp”);

②使うプラグインを宣言する
var xxx = require(“xxx);

③タスク（やりたいこと）を定義する
　gulp.task(“タスク名”,function() {});

④読み込みたいファイルを指定する
　gulp.src(“ファイルのパターン”)

⑤④で指定したファイルに対してやりたい処理を指定する
　pipe(行いたい処理)

⑥⑤で処理したファイルの出力先を指定する
　gulp.dest(“出力先”)

そして、出来上がりはこんな感じ。

/* ①gulpの宣言 */
var gulp = require("gulp");
/* ②gulpプラグインの宣言 */
var compass = require('gulp-compass');
var autoprefixer = require("gulp-autoprefixer");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");
/* ③タスク1（サーバーの立ち上げ） */
gulp.task("server", function() {
browser({
server: {
baseDir: "./"
}
});
});
/* ③タスク2（compassのコンパイル、ベンダーprefix付与） */
gulp.task("compass", function() {
gulp.src("scss/**/*scss")
.pipe(plumber())
.pipe(compass({
config_file: './config.rb',
css: 'css',
sass: 'scss',
bundle_exec: true
}))
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}));
});
/* ③タスク3（scssフォルダを監視して、変更があったらcompassタスクを実行） */
gulp.task('default',['server'], function() {
gulp.watch("scss/**/*.scss",["compass"]);
});

それでは、③タスク2を詳しく見てみましょう。

[L19]
「compass」という名前のタスクを定義。

[L20]
scssフォルダ以下サブフォルダも含めて拡張子がscssのファイルを対象として指定。

[L21]
compassでエラーが出ても止まらないように。

[L22~27]
compassのコンパイルの設定。
「bundle_exec: true」でbundlerでインストールしたcompassでのコンパイルを指定。
すごく地味だけど、ここが今回のキモ(´｡✪ω✪｡｀)

[L28]
コンパイルしたcssファイルにベンダーprefixを追加。

[L29]
cssフォルダに書き出し。

[L30]
ブラウザをリロード！