Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Gulp 2020.10.13

GulpでCSSとJavaScriptのLlintを導入してバリデーションチェックを行う

Tags: ,,,,

今回はGulpを使って、コードフォーマットツールであるLintを導入する方法についてまとめていきたいと思います。この記事ではCSSとJavaScirpt(ECMAScript)を対象としたLintが対象となっています。Gulpを使うことでタスクの中に組み込むことができ、手間をかけることなくLintが使えるようになるのでオススメです。

 

実はCSSのLintに関しては過去記事「GulpでCSSを整える(プレフィックス・文法チェック・自動整形)」でも紹介していますが、内容が古くなっていることもあり改めてこちらの記事でも解説していきたいと思います。またここではすでにGulpの環境が整っていることを前提に進めていきます。

 

CSSLint(gulp-csslint):CSSのバリデーションチェック

CSSLintを使うことで、CSSのフォーマットを整えることができます。まずはGulpで使えるCSSのLintのパッケージである「gulp-csslint」を下記のコマンドでインストールしていきます。

$ npm install --save-dev gulp-csslint

 

パッケージのインストールが完了すると「package.json」に追記されているのが確認できます。

【package.json】※一部抜粋

{
  .......
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-csslint": "^1.0.1",
    .......
  },
  .......
}

 

続けてCSSのLintを実行するタスクを「gulpfile.js」に記述していきます。初めにCSSLintのモジュールを読み込んでいきます。そして、タスクの処理を作成していきます。最初のメソッドである「csslint()」の引数にはCSSLintのルールをオブジェクト形式で指定していきますが、外部のJSONファイルにまとめたものを読み込むことができます。その場合にはこのようにJSONファイルのパスを指定します。

【gulpfile.js】

const { src, dest } = require("gulp"),
csslint = require('gulp-csslint');

const taskCssLint = () => 
  src('src/css/**/*.css')
    .pipe(csslint('.csslintrc.json'))
    .pipe(csslint.formatter())
    .pipe(dest('dist/assets/css'));

exports.csslint = taskCssLint;

 

そして「formatter()」のメソッドを実行すると、コンソール上にエラーやワーニングをレポートとして出力できるようになります。1点注意したいのはSassなどと併用する場合には、Sassのコンパイルを実行した後のCSSファイルに対して適用させないとSassの記法がエラーというように扱われてしまいます。

 

上記で指定したLintルールの設定に関しては下記のように外部のJSONファイルとして管理していきます。それぞれの項目に関しては割愛させていただきますが、必要に応じてtrueの値を設定し適用させるようにしましょう。

【.csslintrc.json】

{
  "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,
  "order-alphabetical": 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
}

 

これで準備が整いましたので、下記のコマンドを入力するとCSSのLintを実行することができます。

$ npx gulp csslint

 

 

ESLint(gulp-eslint):JavaScriptのバリデーションチェック

先程のCSSLintと同じくJavaScript(ECMAScript)にもLintが用意されています。こちらもnpm経由でモジュールを下記の通りインストールしていきます。

$ npm install --save-dev gulp-eslint

 

パッケージのインストールが完了すると「package.json」に追記されているのが確認できます。

【package.json】※一部抜粋

{
  .......
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-eslint": "^6.0.0",
    .......
  },
  .......
}

 

続けてJavaScriptのLintを実行するタスクを「gulpfile.js」に記述していきます。初めにESLintのモジュールを読み込んでいきます。そして、タスクの処理を作成していきます。最初のメソッドである「eslint()」の引数に「useEslintrc」のキーでtrueを設定すると、Lintのルールを外部のJSONファイルにまとめた形で読み込むことができます。

【gulpfile.js】

const { src, dest } = require("gulp"),
eslint = require('gulp-eslint');

const taskEsLint = () => 
  src('src/js/**/*.js')
    .pipe(eslint(
      { useEslintrc: true }
    ))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(dest('dist/assets/js'));

exports.eslint = taskEsLint;

 

そしてCSSLintの時と同じように必要なメソッドを上記の通り続けていきます。「failAfterError()」を使うことでコンソール上にエラーを出力することができます。上記で指定したLintルールの設定に関しては下記のように外部のJSONファイルとして管理していきます。それぞれの項目に関しては割愛させていただきますが、必要に応じて値を設定し適用させるようにしましょう。

【.eslintrc.json】

{
  "env": {
    "browser": true,
    "jquery": true,
    "node": true,
    "es6": true
  },
  "globals": {
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2015
  },
  "rules": {
    "no-console": "off",
    "no-extra-semi": "warn",
    "no-undef": "warn",
    "quotes": [
      "warn", "single"
    ],
    "space-before-blocks": [
      "warn", { 
        "functions": "always" 
      }
    ] 
  }
}

 

これで準備が整いましたので、下記のコマンドを入力するとJavaScript(ECMAScript)のLintを実行することができます。

$ npx gulp eslint

 


 

今回はGulpでCSSとJavaScriptのLintを導入する方法をまとめてみました。チームでプロジェクトを回す場合にはコーディングのルールを設けることもありますが、Lintを使って簡単に統一することができますので、必要に応じて積極的に使っていきたいものですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?