GulpでSassのコンパイルとlivereloadをやってみる

2014/5/27

GulpとGrunt

Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。

Gulpのいいところ

Gruntと大きく違う部分は以下になります。
・Gruntよりもビルドファイルの可読性が良く、短いコードで済む
・なるべくタスクを並列で実行しようとするので、スピードが早い

Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いやすいんではないかと思います。

Gulpの導入

Gulpはnode.jsで動いているので、まずは、node.jsをインストールしましょう。公式サイトから簡単にインストールすることができます。

node.jsのインストールが終わったら、ターミナルを起動してGulpをインストールしていきます。

sudo npm install -g gulp
//バージョンの確認
glup -v

バージョン情報が表示されたら、インストールは完了です。続いてプロジェクトファイルを作成します。テストとしてGulpディレクトリを作成し、package.jsonを作成します。

cd 作業ディレクトリのパス

ディレクトリまで移動できたら、Gulpのプロジェクトファイルpackage.jsonを生成します。この作業は初めの一回だけで、次回からはあるものをコピーして使うといいと思います。

npm init

ターミナルと対話式になるので、プロジェクト名や説明を適当に入力していきましょう。入力せずにEnterで進んでいっても問題ないです。対話が終わるとディレクトリ内にpackage.jsonが出来上がっていると思います。

Gulp
├package.json

Sassのコンパイルとlivereloadに必要なプラグインをインストールします。必要なのは以下の二つです。
・gulp-ruby-sass(gulp-sass)
・gulp-connect

gulp-ruby-sassは出力の種類を選べるので、今回はこちらを使います。処理スピードはgulp-sassのほうが早いです。

npm install gulp-ruby-sass –save-dev
npm install gulp-connect –save-dev
//一度にインストールする場合
npm install gulp-ruby-sass gulp-connect –save-dev

–save-devをつけることでpackage.jsonにインストールしたプラグインの情報を記入することができます。インストールが終わるとnode_modulesというディレクトリが出来、以下のような構成になっているかと思います。

Gulp
├package.json
├node_modules
    ├gulp
    ├gulp-ruby-sass
    ├gulp-connect

プラグインインストール後のpackage.jsonの中身

				{
				  "name": "gulp-test",
				  "version": "0.0.0",
				  "description": "gulp-test",
				  "main": "index.js",
				  "scripts": {
				    "test": "echo \"Error: no test specified\" && exit 1"
				  },
				  "author": "",
				  "license": "ISC",
				  "devDependencies": {
				    "gulp-ruby-sass": "^0.5.0",
				    "gulp-connect": "^2.0.5"
				  }
				}

Gruntの時と同様で、package.jsonにプラグインの情報が記述されていれば、以下のコマンドで簡単にプラグインをインストールすることができます。

npm install

Gulpを動かしてみる

まずは、簡単にGulpを動かしてみます。以下のコードをgulpfile.jsという名前を付けて保存します。

gulpfile.js

				var gulp;
				    gulp = require('gulp');

				gulp.task('default', function() {
				  console.log("gulpのテスト");
				});

流れとしては、requireで使用するプラグインを読み込み、タスクを設定し実行するといった感じになります。

実行してみます。

gulp

正常に実行されれば、console.logの「gulpのテスト」がターミナルに表示されているかと思います。

sassのコンパイル

sassディレクトリを作成して、その中に以下のコードをテストとしてstyle.scssという名前を付けて保存します。

style.scss

				$color: #ccc;

				html{
					background: #F6F7EF;
				}

				body{
					font-size: 15px;
					width: 900px;
					margin: 0 auto;
					background: #fff;
				}

				h1{
					font-size: 20px;
				}

				.box{
					color: $color;
					overflow: hidden;

					div{
						float: left;
						text-align: center;
						width: 30%;
						height: 230px;
						line-height: 230px;
						margin-left: 22px;
						background: #000;
					}

					p{
						margin: 10px;

						a{
							display: block;
							width: 120px;
							margin: 0 auto;
						}
					}
				}

ディレクトリはこのような感じです。

Gulp
├sass
    ├style.scss
├package.json
├node_modules
    ├gulp
    ├gulp-ruby-sass
    ├gulp-connect

gulpfile.jsをsassのコンパイルができるように書き換えます。

gulpfile.js

				var gulp,sass;
				    gulp = require('gulp');
				    sass = require('gulp-ruby-sass');

				gulp.task('sass',function(){
				  gulp.src('./sass/*.scss')
				    .pipe(sass({style : 'expanded'})) //出力形式の種類　#nested, compact, compressed, expanded.
				    .pipe(gulp.dest('./css'));        //cssの出力先ディレクトリ
				});

				gulp.task('default',['sass']);

Gulpはnode.jsのApi「Stream」を使っていて、pipe()で流れを追加していきます。
Node.js の Stream API で「データの流れ」を扱う方法
 Node.jsを使いこなすのに重要なStream API

ターミナルでGulpのタスクを実行します。

gulp

Gulpが正常に実行されたら、sassがコンパイルされ、CSSディレクリが生成されstyle.cssが作成されているかと思います。

Gulp
├css
    ├style.css
├sass
    ├style.scss
├package.json
├node_modules
    ├gulp
    ├gulp-ruby-sass
    ├gulp-connect

ブラウザを自動更新

sassのコンパイルができたので、次はlivereloadをやってみます。テスト用に以下のファイルをsample.htmlという名前で保存し、gulpfile.jsに変更を加えます。

sample.html

				<!doctype html>
				<html lang="en">
				<head>
					<meta charset="UTF-8">
					<title>Gulpのサンプル</title>
					<link rel="stylesheet" href="css/style.css">
				</head>
				<body>
					<h1>Gulpのサンプル</h1>
					<div class="box">
						<div>ボックス1</div>
						<div>ボックス2</div>
						<div>ボックス3</div>
					</div>
				</body>
				</html>

gulpfile.js

				var gulp,sass,connect;
				    gulp = require('gulp');
				    sass = require('gulp-ruby-sass');
				    connect = require('gulp-connect');

				gulp.task('sass',function(){
				  gulp.src('./sass/*.scss')
				    .pipe(sass({style : 'expanded'})) //出力形式の種類　#nested, compact, compressed, expanded.
				    .pipe(gulp.dest('./css'));        //cssの出力先ディレクトリ
				});
				
				//ローカルサーバー
				gulp.task('connectDev',function(){
				  connect.server({
				    root: ['./'],	//ルートディレクトリ
				    port: 8000,		//ポート番号
				    livereload: true
				  });
				});
				
				//htmlタスク
				gulp.task('html',function(){
				  gulp.src('./*.html')			//実行するファイル
				    .pipe(connect.reload());	//ブラウザの更新
				});
				
				//ファイルの監視
				gulp.task('watch',function(){
				  gulp.watch(['./*.html'],['html']);	//htmlファイルを監視
				});

				gulp.task('default',['sass','connectDev','watch']);

流れとしては、connectDevタスクでローカルサーバーが立ち上がり、watchタスクでhtmlファイルを監視します。htmlファイルに変更があれば、htmlタスクのconnect.reload()が実行されブラウザが自動で更新されます。

Gulpを実行してみます。

gulp

ターミナルにローカルサーバーのURLが表示されるので、ブラウザで開きます。

開くとこんな画面になるので、sample.htmlをクリック。

htmlファイルを変更するとブラウザが自動で更新されます。

livereload時に「Error: Forbidden」というエラーがターミナルに表示されていますが、livereloadは動いています。このエラーの原因がよく分からなかったので、分かり次第更新します。

sassも監視して、livereloadする

htmlファイル意外もwatchで監視しておくととても楽になります。sassファイルが変更されたらコンパイルし、cssに変更があれば, ブラウザを自動更新するという設定をgulpfile.jsに追加します。

gulpfile.js

				var gulp,sass,connect;
				    gulp = require('gulp');
				    sass = require('gulp-ruby-sass');
				    connect = require('gulp-connect');

				gulp.task('sass',function(){
				  gulp.src('./sass/*.scss')
				    .pipe(sass({style : 'expanded'})) //出力形式の種類　#nested, compact, compressed, expanded.
				    .pipe(gulp.dest('./css'));        //cssの出力先ディレクトリ
				});
				
				//ローカルサーバー
				gulp.task('connectDev',function(){
				  connect.server({
				    root: ['./'],	//ルートディレクトリ
				    port: 8000,		//ポート番号
				    livereload: true
				  });
				});
				
				//htmlタスク
				gulp.task('html',function(){
					gulp.src('./*.html')			//実行するファイル
						.pipe(connect.reload());	//ブラウザの更新
				});
				
				//ファイルの監視
				gulp.task('watch',function(){
					gulp.watch(['./*.html'],['html']);			//htmlファイルを監視
					gulp.watch(['./sass/*.scss'],['sass']);	//scssファイルを監視
					gulp.watch(['./css/*.css'],['html']);		//cssファイルを監視
				});

				gulp.task('default',['watch','connectDev']);

watch状態にある場合はcontrol+Cで一度Gulpを止めて、再度Gulpを実行します。

gulp