クライアント側のコーディングを行う上で大変便利なタスクランナーであるgulpですが、様々な機能がプラグインで実装することができます。今回はその中でもCSSに関する機能にフォーカスして、CSSファイルを整えていきたいと思います。   ちょうど前回の記事「gulpをローカルにインストールしてプロジェクト内で使用する」でもCSSファイルの圧縮を紹介していますので、こちらの記事では省略しますがご参考にどうぞ！   そして今回は下記のタスクを見ていきます。 ・ベンダープレフィックスの自動付与 ・CSSプロパティの記述整形 ・CSS文法チェック＋レポートHTML出力 では順番に進めていきましょう。  

【gulp-autoprefixer】ベンダープレフィックスの自動付与

数あるCSSプロパティの中でも比較的新しいものに関してはまだベンダープレフィックスの記述が必要な場合もあります。しかし、毎回一つずつ記述していくのは面倒ですし現実的ではありません。そこでgulpを使うことで自動化していきます。   まずはプロジェクトフォルダに移動し下記コマンドでプラグインをインストールします。  

$ npm install gulp-autoprefixer --save-dev

  次に「gulpfile.js」に下記を参考に追記します。   【gulpfile.js】

var prefix = require("gulp-autoprefixer");
gulp.task('prefix', function () {
    return gulp.src(['gulp-prefixed/*.css'])
        .pipe(prefix({
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        }))
    .pipe(gulp.dest('gulp-prefixed/prefixed'));
});

  こうすることで次のコマンドでベンダープレフィックスが自動付与されるようになります。ちなみに、上記のbrowserの値にはそれぞれ対応させるブラウザを指定します。  

$ gulp prefix

 

【gulp-csscomb】CSSプロパティ記述整形

CSSのプロパティ順序はそんなに重要ではありませんが、チームでコーディングを行ったりする際にも規則的に並べておくことでメンテナンス性が向上します。   同じく下記コマンドでインストールし「gulpfile.js」に追記していきます。  

$ npm install gulp-csscomb --save-dev

  【gulpfile.js】

var csscomb = require("gulp-csscomb");
gulp.task('csscomb', function() {
  gulp.src("gulp-csscomb/*.css")
    .pipe(csscomb())
    .pipe(gulp.dest("gulp-csscomb/combed"));
});

  次に「gulpfile.js」と同階層に「.csscomb.json」ファイルを設置します。このファイルはプロパティの整形ルールを指定するもので、下記サイトよりコードを出力することができます。出力されたコードを「.csscomb.json」のファイル名で保存します。   ＞＞　CSScomd config（http://csscomb.com/config）   これで下記コマンドでCSSのプロパティが整形されます。先述の「.csscomb.json」では並び順を始め、単位やインデントの形式などが細かく指定できます。  

$ gulp csscomb

 

【gulp-csslint】CSS文法チェック＋レポートHTML出力

CSSでいうと多少の文法エラーであればブラウザ上で問題なく表示されるのですが、思わぬエラーの原因になる可能性もありますので、しっかり摘み取っておくことが重要です。CSSの文法チェックもgulpで自動化させ、HTML形式のレポートで出力することですぐに確認と修正ができるようにしておきます。   最初にプラグインをインストールするのですが、文法チェック用とレポート出力用の2つのコマンドが必要になります。  

$ npm install --save-dev gulp-csslint　// CSS文法チェック
$ npm install --save-dev gulp-csslint-report　// HTML形式のレポート出力

  そして同じく「gulpfile.js」にコードを記述していきます。 【gulpfile.js】

var csslint = require("gulp-csslint");
var htmlReporter = require('gulp-csslint-report');
gulp.task('csslint', function() {
    gulp.src("gulp-csslint/*.css")
        .pipe(csslint({
            "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,
            "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
        }))
        .pipe(htmlReporter());
});

  csslint関数の引数にはそれぞれエラー確認項目の設定が可能です。かなり細かい部分までチェックできますが、エラーが表示が多くなると確認作業がやりづらくなるので必要最小限で問題ないかと思います。   また上記はcsslint関数の引数に直接オブジェクトの形でルール設定を行なっていますが、下記のように外部のJSONファイルにまとめておくと管理しやすくなります。その場合、引数には設定用のJSONファイルのパスを指定します。 【gulpfile.js】

var csslint = require("gulp-csslint");
var htmlReporter = require('gulp-csslint-report');
gulp.task('csslint', function() {
    gulp.src("gulp-csslint/*.css")
        .pipe(csslint('csslintrc.json')
        .pipe(htmlReporter());
});

  【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,
    .........
}

  こちらの方がgulpfile.jsのコードもスッキリしますし、設定の項目も見やすくなりますね。  

---

  このように、CSSを精査することで質の高い成果物に仕上げることができます。順番としては、ベンダープレフィックス → プロパティの記述整形 → 文法チェックと行い、最後に圧縮するとベストなのではないでしょうか。