トップ > せいさく > Gulp.jsを使ってbundle execする
せいさく

Gulp.jsを使ってbundle execする

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ファイルが変更されたら、ブラウザをリロードする

【前提環境】

RubyNode.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]
ブラウザをリロード!

5.gulpの実行

gulpを実行するときは、コマンドプロンプトから

> gulp compass

と入力すると、compassタスクが実行されます。
また、gulpfile.jsでタスク名に「default」を指定した場合は

> gulp

だけで実行できます。
今回作ったgulpfile.jsでは③タスク3でdefaultタスクの定義をしています。

[L34]
defaultタスクを定義。
[‘server’] という記述がありますが、これは依存タスクといってserverタスクが先に実行されます。

[L35]
scssフォルダ配下のscssファイルを監視して、compassタスクを実行。

これで、scssファイルを保存すると、コンパイル~ブラウザリロードまで自動でほぃっと実行されます

いかがでしたか?
下準備がちょっと複雑な感じですが、はじめに1回やっておけば、コーディング中に余計な手間が省けます。今回使ったご紹介したものだけでなく、たくさんのプラグインがありますので、プロジェクトによっていろいろと使ってみたいですね。



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる