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

Gulp2020.10.13

今回は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を実行することができます。