【保存版】クオリティアップ！gulp.jsで文法チェック！

f:id:sitk:20150527233124p:plain

前回の記事に引き続き、gulp.jsです。今回は、制作のクオリティチェックに欠かせない、文法チェックのお話。

いままで、HTML-lintや、W3Cのサービスにコピペして、確認して、間違いがあると修正して、また確認、、、

なんて面倒くさいことをしておりましたが！このgulp.jsを使えばイチコロです。

簡単ですので、ぜひご活用くださいませ。

前回ご紹介した内容（gulpfile.js）に、下記を追加するだけでOKです。

HTML文法チェック

まずは、プラグインをインストール。

$ npm install --save-dev gulp-htmlhint

そして、gulpfile.jsに下記を追記します。

////////////////////////////////////////////////////////////
//HTML文法チェック
////////////////////////////////////////////////////////////
var htmlhint = require("gulp-htmlhint");

gulp.task('html', function() {
    gulp.src('**/*.html')
        .pipe(htmlhint())
        .pipe(htmlhint.reporter())
});

エラーがあると、ターミナルに表示してくれます。

f:id:sitk:20150527233153p:plain

CSS文法チェック

CSSも同様、プラグインをインストールします。

$ npm install --save-dev gulp-csslint

同じく、gulpfile.jsに下記を追記します。

////////////////////////////////////////////////////////////
//CSS文法チェック
////////////////////////////////////////////////////////////
var csslint = require('gulp-csslint');

gulp.task('css', function() {
  gulp.src('cmn/css/*.css')
    .pipe(csslint())
    .pipe(csslint.reporter());
});

f:id:sitk:20150527233212p:plain

JS文法チェック

設定に一番てこずりました(´・ω・`)

まずは、jshintをグローバルにインストールします。

$ npm install -g jscs jshint

続いて、ローカルにプラグインをまとめてインストール。

$ npm install --save-dev gulp gulp-jscs gulp-jshint jshint-stylish gulp-notify gulp-notify-growl

gulpfile.jsには、下記を追記します。

////////////////////////////////////////////////////////////
//JS文法チェック
////////////////////////////////////////////////////////////
var notify = require('gulp-notify');
var growl = require('gulp-notify-growl');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');

gulp.task('jscs', function() {
    gulp.src('cmn/js/*.js')
        .pipe(jscs())
        .pipe(notify({
            title: 'JSCS',
            message: 'JSCS Passed. Let it fly!'
        }));
});

gulp.task('lint', function() {
    gulp.src('cmn/js/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jshint.reporter('fail'))
        .pipe(notify({
            title: 'JSHint',
            message: 'JSHint Passed. Let it fly!',
        }))
});

下記ソースを’.jscsrc’ファイルに記載し、プロジェクトフォルダのルートに設置します。

{
"requireCurlyBraces":["if", "else", "for", "while", "do", "try", "catch", "case", "default"],
"requireSpaceAfterKeywords":["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"requireParenthesesAroundIIFE":true,
"requireSpacesInFunctionExpression":{ "beforeOpeningCurlyBrace": true },
"disallowSpacesInFunctionExpression":{ "beforeOpeningRoundBrace": true },
"requireMultipleVarDecl":true,
"disallowEmptyBlocks":true,
"disallowSpacesInsideObjectBrackets":true,
"disallowSpacesInsideArrayBrackets":true,
"disallowSpacesInsideParentheses":true,
"disallowQuotedKeysInObjects":"allButReserved",
"requireCommaBeforeLineBreak":true,
"requireOperatorBeforeLineBreak":["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"disallowLeftStickedOperators":["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireRightStickedOperators":["!"],
"disallowRightStickedOperators":["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"requireLeftStickedOperators":[","],
"disallowSpaceAfterPrefixUnaryOperators":["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforePostfixUnaryOperators":["++", "--"],
"requireSpaceBeforeBinaryOperators":["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
"requireSpaceAfterBinaryOperators":["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
"disallowKeywords":["with"],
"disallowMultipleLineBreaks":true,
"validateLineBreaks":"LF",
"validateQuoteMarks":"'",
"disallowMixedSpacesAndTabs":true,
"disallowTrailingWhitespace":true,
"disallowKeywordsOnNewLine":["else"],
"requireLineFeedAtFileEnd":true,
"maximumLineLength":120,
"requireCapitalizedConstructors":true,
"requireDotNotation":true,
"excludeFiles":["node_modules/**"]
}

下記コマンドで実行です。
チェックの度に、下記コマンドの実行が必要です。