「gulp.js」で快適なWebページコーディング環境を目指す

前回、Windows上で「Node.js」と「gulp.js」をインストールして、「gulp.js」を使用できる環境を用意しました。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す（準備編）

繰り返しになりますが「gulp.js」は本体のみでは機能せず、必要は機能をプラグインとしてインストールする必要があります。
今回はHTML、CSS、JavaScriptを含む静的Webページコーディングの、快適な開発環境構築を目指して便利そうなプラグインをいくつか紹介したいと思います。

まずは任意のプロジェクトフォルダのルートに移動し、「gulp.js」を利用する準備をします。

> npm init
> npm install --save-dev gulp

新規で「gulpfile.js」を用意し、「gulp.js」をロードしておきます。

var gulp = require('gulp');

このファイルを編集することで、機能を追加していきます。

「htmlhint」を使ってHTMLファイルをValidationチェック

「htmlhint」はHTMLファイルのValidationチェックを実行してくれます。
gulp-htmlhint

以下のコマンドを実行してインストールします。

> npm install --save-dev gulp-htmlhint

利用するために「gulpfile.js」に以下を追記します。

var htmlhint = require("gulp-htmlhint");
gulp.task('html', function() {
	gulp.src('**/*.html')
		.pipe(htmlhint())
		.pipe(htmlhint.reporter());
});

タスク名は「html」としたので、以下のコマンドを実行することでファイル「’**/*.html’」つまり、プロジェクトフォルダ配下の拡張子がhtmlの全ファイルに対してHTML Validationチェックを実行します。
「htmlhint()」で処理を実行し、「htmlhint.reporter()」で結果をコンソールに出力します。

> gulp html

「csslint」を使ってCSSファイルをlintチェック

「csslint」はCSSファイルのlintチェックを実行してくれます。
gulp-csslint

以下のコマンドを実行してインストールします。

> npm install --save-dev gulp-csslint

利用するために「gulpfile.js」に以下を追記します。
ここで「csslint」では「htmlhint」のように「全てのフォルダの全てのファイル」という指定ができないようです。
「任意のフォルダの全てのファイル」といったパスを記述しないと、うまくチェック機能が働かないので、気を付ける必要があります。
※私のローカル環境で確認。そもそも間違ってる？

var csslint = require('gulp-csslint');
gulp.task('css', function() {
	gulp.src('css/*.css')
		.pipe(csslint())
		.pipe(csslint.reporter());
});

先ほどと同様に、以下のコマンドを実行することでcssファイルのlintチェック結果が出力されます。

> gulp css

ここで「csslint」について、デフォルトのルールのままでは「warning」が大量に出力されてしまい、肝心な「error」がどこにあるのか探しにくいといった事態になりやすいです。また「warning」の内容はというと、通常問題としていない箇所まで細かく指摘されます。
クオリティを上げるという意味では好ましくないですが、純粋に「error」を探す目的では、オプションで「warning」チェックを外したほうが使いやすいでしょう。

gulp.task('css', function() {
	gulp.src('css/*.css')
		.pipe(csslint({
			"adjoining-classes": false,
			"box-model": false,
			"box-sizing": false,
			"bulletproof-font-face": false,
			"compatible-vendor-prefixes": false,
			"empty-rules": false,
			"display-property-grouping": false,
			"duplicate-background-images": false,
			"duplicate-properties": false,
			"fallback-colors": false,
			"floats": false,
			"font-faces": false,
			"font-sizes": false,
			"gradients": false,
			"ids": false,
			"import": false,
			"important": false,
			"known-properties": false,
			"outline-none": false,
			"overqualified-elements": false,
			"qualified-headings": false,
			"regex-selectors": false,
			"shorthand": false,
			"star-property-hack": false,
			"text-indent": false,
			"underscore-property-hack": false,
			"unique-headings": false,
			"universal-selector": false,
			"unqualified-attributes": false,
			"vendor-prefix": false,
			"zero-units": false
		}))
		.pipe(csslint.reporter());
});

もうちょっとシンプルに設定したいですね。。
これらオプション記述を外部ファイル化もできますが、とりあえず説明のため書きだしています。

CSSファイルの品質向上にあたり、ひとつずつオプションを有効にしていくのもよい方法かもしれません。

ちなみに以下、私が個人的にwarningを有効にしているオプションです。

empty-rules	プロパティを記述していない空のセレクタをチェック
display-property-grouping	inline要素にheight、inline-block要素にfloat、table-cell要素にmarginなど効果のない、つまり指定が誤っているプロパティをチェック
duplicate-properties	同一セレクタ内で2度以上同じプロパティを指定している箇所をチェック
font-faces	大量のweb fontのダウンロードはネットワーク負荷になるので5つ以上のweb fontを読み込んだ場合に注意喚起する
gradients	gradientプロパティを使用する場合にベンダープレフィックスが不完全でないかチェックする
import	importで他の外部CSSを読み込んでいる場合に注意喚起する
known-properties	存在しないプロパティを記述していないか、つまり誤りがないかチェック
shorthand	margin、paddingの4方向のプロパティをまとめてではなく、各々で分けて指定している場合に注意喚起する。 例：margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;
star-property-hack	IE8など古いブラウザ対策にハックを使用していないかチェック
underscore-property-hack	IE7など古いブラウザ対策にハックを使用していないかチェック
zero-units	「0px」や「0%」など単位を含む記述にゼロを指定していないかチェック

各オプションの詳細については以下から確認できます。
Rules by ID · CSSLint/csslint Wiki

コーディング中にファイルが更新されたら「Browsersync」でブラウザを自動リロード

「Browsersync」は対象となるファイルを監視し、ファイルが上書き保存されたことを検知し、プレビュー中のブラウザを自動でリロードしてくれます。
browser-sync

以下のコマンドを実行してインストールします。

> npm install --save-dev browser-sync

利用するために「gulpfile.js」に以下を追記します。

var browserSync = require("browser-sync");
gulp.task("browser", function () {
	browserSync({
		server: {
			baseDir: "./"
		}
	});

	gulp.watch("**/*.html", function() { browserSync.reload(); });
	gulp.watch("**/*.css", function() { browserSync.reload(); });
});

「baseDir」でソースのルートディレクトリを指定します。
gulpの機能「watch」でファイルを監視し、更新を感知すると処理を実行します。つまり拡張子が「html」「css」のファイルが上書き保存されたことを感知して「browserSync」処理を実行します。

先ほどと同様に、以下のコマンドを実行します。

> gulp browser

そうすると「http://localhost:3000/」でブラウザが開き、ソースがプレビュされ、ファイルが更新する度にブラウザをリロードしてくれます。
例えばこのURLをIE、Firefox、Google ChromeやSafari、また、ローカルネットワークに存在するAndroid、iPhoneやタブレットなどでアクセスすれば、全てのブラウザを同時に自動リロードしてくれます。

「Browsersync」については、gulpのプラグインである以前に、さまざまなプラットフォームのツールとして展開しているようです。
Browsersync – Time-saving synchronised browser testing

細かい検証の手間がだいぶ楽になりますね。