share facebook facebook twitter menu hatena pocket slack

2018.07.09 MON

Gulp4でHTML / SASS / JavaScriptのLintを自動化

工藤 響己

WRITTEN BY 工藤 響己

概要

生まれ変わったタスクランナーGulp4を使って、webサイト(≠ webアプリ)制作用のBoilerplateを作成し、HTML / SASS / JavaScriptの構文チェック(Lint)を自動化するタスクを作ってみました。
下記のようなsrcとdistに別れたフォルダ構成でのwebサイト制作において、dist側ではなくsrcファイル側のインデントや文法エラーを自動的に修正して行きます。

terminal

.
├── README.md
├── dist
│   ├── css
│   │   └── style.css
│   ├── img
│   │   ├── sample.jpg
│   ├── index.html
│   ├── js
│   │   ├── lib.min.js
├── gulpfile.js
├── package.json
├── scss-lint.yml
└── src
    ├── html
    │   ├── index.html
    ├── img
    │   ├── sample.jpg
    ├── js
    │   ├── app
    │   │    └──  some_function.js
    │   └── core
    │      └── jquery-3.3.1.js
    │ 
    │       
    └── sass
        ├── foundation
        │   ├── _config.scss
        │   ├── _mixin.scss
        │   └── _reset.scss
        ├── layout
        │   ├── _common.scss
        │   ├── _footer.scss
        │   ├── _header.scss
        │   └── _sidebar.scss
        ├── object
        │   ├── component
        │   │   ├── _breadcrumb.scss
        │   │   ├── _button.scss
        │   │   ├── _form.scss
        │   │   └── _nav.scss
        │   ├── project
        │   └── utility
        │       ├── _clearfix.scss
        │       └── _utility.scss
        └── style.scss

期待するメリット

  • 手作業構文テストからの脱却
  • 構文エラー減少によるコード品質の高位安定化
  • ケアレスミスに気づきやすくなる
  • 古い(obsoleteな)記法のコードが減らせる
  • CSSプロパティ順を統一することでgzip圧縮時のパフォーマンスが上がる
  • どのエディタを使って作業してもインデントや改行など些細なスタイルの違いが現れることがなくなる
    • 宗教戦争の回避 => 世界平和の到来:angel:
    • Gitで差分が取りやすくなる
    • 複数人が参加するチーム仕事がやりやすくなる
  • .cssなどコンパイル済みファイルではなく、.scssファイル形式などのソースファイルで納品できるようになる

使用するパッケージ

HTMLHint

HTMLのvalidator / linterは色々ありましたが、ダウンロード数が多くまたメンテナンスが継続されていたこのパッケージを採用。

gulp-scss-lint

Sassのvalidator / linter。scss-lintはruby gemであり別途インストールが必要。
※gemはアンダースコアの(scss_lint)なので注意。
※rubyやxcodeのバージョン違い、MacOSをSierraからHigh Sierraにアプデした場合などにエラーが出ることがあります。そのときは下記を参照してください。
Ruby Sass is Deprecatedだったりすることもあり、sassのLintツールはnode-sassベースのgulp-sass-lintなど他のパッケージも検討中です。

$ gem install scss_lintでエラーが出るとき

gulp-eslint

おなじみESLintのgulp版。
さあ、関連パッケージを一気にインストールしましょう。
これらのパッケージは全て開発にしか使わないので--save-devオプションをつけてしまっていいと思います。
Gulp3=>Gulp4はBreaking Changeで今までのコードが動かなくなる可能性が高いので今Gulp3を使っている方は要注意。後で紹介しているGulp4への移行方法をご覧ください。

terminal

gem install scss_lint
※上記コマンドでエラーが出る場合はこっち=> sudo gem install -n /usr/local/bin scss_lint
npm i gulp@next --save-dev
npm i gulp-sass --save-dev
npm i gulp-htmlhint --save-dev
npm i gulp-scss-lint --save-dev
npm i sass-lint-auto-fix --save-dev
npm i gulp-eslint --save-dev
npm i gulp-reporter --save-dev

gulpfile.js

以下はLint関連箇所の抜粋です。
gulp4ではgulp.seriesでタスクの直列処理、gulp.parallelで並列処理ができるようになっているのがいい感じです。
コードの見通しが良くなるので、慣れればこっちの方が使いやすそうです。

gulpfile.js

const eslint = require("gulp-eslint");
const gulp = require("gulp");
const htmlhint = require("gulp-htmlhint");
const scsslint = require("gulp-scss-lint");
const paths = {
    root: "./src",
    html: {
        src: "./src/html/**/*.html",
        dest: "./dist/"
    },
    styles: {
        src: "./src/sass/**/*.scss",
        dest: "./dist/css"
    },
    scripts: {
        src: "./src/js/**/*.js",
        jsx: "./src/js/**/*.jsx",
        dest: "./dist/js"
    }
};

//===Lint Tasks===
//HTML Lint
function htmlLint() {
    return gulp
        .src(paths.html.src)
        .pipe(htmlhint())
        .pipe(htmlhint.reporter())
}
//SASS Lint
function sassLint() {
    return gulp.src(paths.styles.src).pipe(
        scsslint({
            config: "scss-lint.yml"
        })
    );
}
//ESLint
function esLint() {
    return gulp
        .src([paths.scripts.src, paths.scripts.jsx, "!./src/js/core/**/*.js"])
        .pipe(eslint({
            fix: true
        }))
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
}

gulp.task("eslint", esLint);
gulp.task("html-lint", htmlLint);
gulp.task("sass-lint", sassLint);
gulp.task("lint", gulp.series(sassLint, esLint, htmlLint));

package.json

関係ある箇所の抜粋です。

package.json

{
  "name": "gulp-boilerplate",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {},
  "author": "me",
  "license": "ISC",
  "description": "frontend develop gulp modules",
  "repository": {
    "type": "git",
    "url": ""
  },
  "devDependencies": {
    "eslint-plugin-react": "^7.10.0",
    "gulp": "^4.0.0",
    "gulp-eslint": "^4.0.2",
    "gulp-htmlhint": "^2.1.1",
    "gulp-reporter": "^2.8.3",
    "gulp-sass": "^4.0.1",
    "gulp-scss-lint": "^0.6.1",
    "sass-lint-auto-fix": "^0.11.0"
  },
  "scripts": {
    "sass-lint": "sass-lint -v",
    "sass-lint:fix": "sass-lint-auto-fix -c scss-lint.yml",
    "lint": "sass-lint-auto-fix -c scss-lint.yml & gulp lint"
  }
}

実行

$ npm run lint -s でHTML, SASS, JavaScriptをまとめてLintします。
HTMLHint, scss-lint, ESLint共に豊富なオプションが用意されているので適宜自分にあった設定を追加していきましょう。

実行時のnpmエラー

$ npm run lintを実行すると以下のようなエラーが出ます。

terminal

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! yourproject@1.0.0 test: `gulp lint`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the yourproject@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

これはテストに通っていないからエラーが出てるというある種正常な状態なので、 $ npm run lint -s--silentオプションをつけてこのエラー表示を消してやります。

sass-lint-auto-fix

scss-lintにsass-lint-auto-fixを組み合わせることで、$ npm run sass-lint:fixでsrcフォルダ内の.scssファイルがルールに基づき自動修正されます。

参考文献

下記を参考にさせていただきました。ありがとうございます。

gulp4関連

自動Lintとツール関連

所感

Gulp4は3よりコードの見通しがよくなってて好き。
またsass-lint-auto-fixはコマンド一発でインデントやCSSプロパティの順番など気にせず雑に書いたコードが綺麗に自動整形されるのが気持ちいいです。
また今後はテンプレートエンジンやPrettierやWebpackと組み合わせた構成にして行ければ。

この運用を始めたばかりなので、導入の結果どうなったかについてはまだ書くことができません。半年後くらいに続報を追記できればと思います。:bow_tone1:

元記事はこちら

Gulp4でHTML / SASS / JavaScriptのLintを自動化

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。