SassのファイルをSCSS-Lint+Gulpで自動的にテスト

SCSS-Lintというのは.scssをチェックしてあらかじめ決めたルールに対して違反がないかを調べるためのツールです。

https://github.com/brigade/scss-lint

今、WordPressのコンテンツ部分のスタイルのテンプレート的なプロジェクトを一人で始めていて、再利用を前提にするならCIも導入したいので取り込んでみました。

https://github.com/miya0001/wordpress-generic-content-styles

必要なものをかき集める

まず、SCSS-LintはRubyのGemが二つほど必要なのでそれらをインストールします。

GitHubで共有するならGemfileに書くとみんなハッピーですね。

# A sample Gemfile
source "https://rubygems.org"

# gem "rails"
gem "scss_lint"
gem "scss_lint_reporter_checkstyle"

そしてお約束の以下のコマンドを発火。

$ bundle install --path vendor/bundle

今回はGulp経由でテストを行いたいので、以下のコマンドも実行。

$ npm install gulp-scss-lint --save-dev

そしてgulpfile.jsに以下のように記述。

var scsslint = require('gulp-scss-lint');

gulp.task( 'lint', function() {
	return gulp.src('sass/**/*.scss')
		.pipe( scsslint( {
			'reporterOutputFormat': 'Checkstyle',
			'bundleExec': true,
			'config': 'scss-lint.yml'
		} ) )
		.pipe( scsslint.failReporter() );
} );

テスト用のルールをダウンロードして、適当に修正。

https://github.com/brigade/scss-lint/blob/master/config/default.yml

今回のプロジェクトでは、WordPressのコーディングスタンダードに合わせるために、インデントをスペースからタブに変えたりとかしました。

  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: tab
    width: 1

最後にテストを実行。

gulp lint

ちなみに僕はgulpを-gをつけないでインストルしているので、package.jsonに以下のように記述してnpm testで実行しています。

  "scripts": {
    "test": "node_modules/gulp/bin/gulp.js test"
  },

テスト結果の出力は以下のような感じ。

[17:02:14] common/wordpress-classes.scss:51 [W] ImportantRule: !important should not be used
[17:02:14] common/wordpress-classes.scss:55 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[17:02:14] common/wordpress-classes.scss:57 [W] PropertySortOrder: Properties should be ordered float, margin-left, margin-right, text-align, width
[17:02:14] common/wordpress-classes.scss:64 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[17:02:14] common/wordpress-classes.scss:66 [W] PropertySortOrder: Properties should be ordered float, margin-left, margin-right, text-align, width

プロパティの順番とかも注意してくれるとはなかなかうるさいやつめw

Travisで自動的に発火

.travis.ymlに以下のように記述しておくとgit pushとかプルリクの時に自動的に発火してくれます。

language: node_js
node_js:
- '0.11'
- '0.10'
before_script:
    - npm install
    - bundle install --path vendor/bundle
script:
    - npm test

 

再利用を前提にするとこういうことも可能になるというお話でした。

これ_sにプルリクを送ると喜ばれるかも。