CSS 最適化はこれ一個で完結! 『gulp-pleeease』でベンダープレフィックス付けて minify しよう!!

phi phi on css, gulp

css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました.

ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして...

その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します.

pleeease とは?

pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます.

やってくれること一覧

  • CSS の事前処理
  • ベンダープレフィックスの付与( Autoprefixer )
  • rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪
  • IE8 のための opacity filter を追加
  • CSS フィルタを SVG 等価のものに変換
  • メディアクエリの整理( pack )
  • minify
  • sourcemap の出力

サポートしている引数一覧

主な指定可能プロパティについて紹介します.

autoprefixer

default: {browsers: ["> 1%", "last 2 versions", "Firefox ESR", "Opera 12.1"], cascade: true}

ブラウザと, どのバージョンをまでサポートするかを指定できます. 指定可能なリストはこちら

.element {
  display: flex;
  flex-direction: column;
  background: linear-gradient(red, blue);
}

.element {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  background: -webkit-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

rem

default: ["16px", {replace: false, atrules: false}]

rem を px に変換する際の基準となる単位を指定します.

.element {
  font-size: 2rem;
}

.element {
  font-size: 32px;
  font-size: 2rem;
}

minifier

default: true

css を minify するかどうかのフラグ

mqpacker

default: true

メディアクエリをルールごとにパックするかどうかのフラグ

@media (max-width: 36em) {
  .element {
    color: red;
  }
}
@media (max-width: 36em) {
  .test {
    color: blue;
  }
}

@media (max-width: 36em) {
  .element {
    color: red;
  }
  .test {
    color: blue;
  }
}

gulp-pleeease とは?

gulp-pleeease は gulp で pleeease を使えるようにするプラグインです. 指定可能な引数は基本同じです.

今回はこれを使って pleeease の使いかたを紹介していきます.

Usage

今回は LESS -> CSS の方法を紹介していきます.

src/style.less の内容を css に変換後, ベンダープレフィックスの付与や minify を行います.

Install

npm 経由でインストールします.

npm install --save-dev gulp  
npm install --save-dev gulp-less  
npm install --save-dev gulp-pleeease  

Setup

ディレクトリ構成はこんな感じにします.

.
├── gulpfile.js
├── package.json
└── src
    └── style.less

そして gulpfile.js の中身を書いていきましょう.

var gulp = require('gulp');  
var less = require('gulp-less');  
var pleeease = require('gulp-pleeease');

gulp.task('css', function() {  
  gulp.src('./src/style.less')
    .pipe(less({

    }))
    .pipe(pleeease({
      out: 'all.min.css',
    }))
    .pipe(gulp.dest('./dest'))
    ;
});

gulp.task('watch', function() {  
  gulp.watch(['src/*', 'src/**/*'], ['css']);
});


gulp.task('default', ['css']);  
gulp.task('dev', ['watch']);  

Run

下記のコマンドを実行してください.

$gulp

./destall.min.css というファイルが出力されているのがわかるかと思います.

Promise ないよって怒られたら Node.js のバージョンを上げて再度実行してみてください.

Demo

Usage で紹介した構成のデモを github で作りました.
よかったら clone して実際に動かしてみてください.

https://github.com/phi-jp/gulp-pleeease-demo

Reference