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

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

今回は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を使って簡単に統一することができますので、必要に応じて積極的に使っていきたいものですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram