読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

【保存版】クオリティアップ!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/**"]
}

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

$ gulp jscs

出力時はこうなります。

f:id:sitk:20150527233226p:plain

よく見ないと、エラーの内容がよくわからないw
ダブルクォーテーションが抜けてるのですが、そこをしっかりと明記して欲しいですね。

ちょっと面倒ですが。。。
もっといい方法ありましたら教えて下さい!

それでは、楽しいコーディングライフを!

追伸:メルマガもやってます。

www.mag2.com

気ままに配信しておりますので、ブログと併せて、ぜひご登録を!
目指せWeb業界!就職・転職・起業なら、学校では教えてくれないWeb制作の現場