gulp-pleeeaseでCSSにautoprefixerとMinifyを実行する

/

pleeease

pleeeaseはautoplefixerやMinifyなどをまとめて実行してくれるライブラリです。gulpでベンダープレフィックスの対応を自動化したいと思い、最初はautoprefixerを使おうかと思ったのですがpleeeaseのほうが便利そうなのでこっちを試してみました。

変わった名前のライブラリですがpleeeaseという言葉は一応辞書にのっていてPleaseを強調した表現のようですが、全部お願い!ぐらいのニュアンスなんでしょうか。

npm

今回はgulpを利用していきますがpleeease単体でnpmからインストールして使うことも出来ます。

インストール

$ npm install -g pleeease-cli

使い方

gulpがメインなのでさらっと
.pleeeaserc に読み込み先と出力先を記述

{
  "in": "style.css",
  "out": "styles.fixed.css"
}

コンパイルを実行

$ pleeease compile

gulp-pleease

本命のgulp-pleeeaseをインストールしていきます。
gulp-pleease
gulpを使ったフロントエンド開発 導入編

インストール

$ npm install --save-dev gulp-pleeease

gulpfile

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

gulp.task('css', function () {
  gulp.src('./src/style.css')
  .pipe(pleeease({
    "minifier": false
  }))
  .pipe(gulp.dest('./dest'));
});

gulp-pleeeaseではデフォルトで以下の設定のautoprefixerが設定されています。

{
  browsers: ["> 1%", "last 2 versions", "Firefox ESR", "Opera 12.1"], cascade: true
}
$ gulp css
//タスク実行前
body {
  display: flex;
}

//実行後
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Out

gulp-pleeeaseの場合は通常のpleeeaseと違いgulpで読み込み先と出力先を指定しますが、outを使うことで出力されるファイルの名前を設定する事が出来ます。

{
  out: "style.min.css"
}

Preprocessors

Pleeeaseはオプションを設定すると Sass, Less, Stylusのコンパイルを実行してくれます。

{
  sass: true
}
//style.scss
body {
  h1 {
    font-size: 24px;
  }
}
//style.css
body h1 {
  font-size: 24px; }

Options

pleeeaseは多くの機能を備えたライブラリなので多数のオプションがあります。

autoprefixer

autoprefixerはbrowserオプションで対応するベンダープレフィクスの範囲を指定できます。
詳しいオプションの内容はautoprefixer/Githubbrowserlist/githubで確認出来ます。

{
  "autoprefixer": {"browsers": ["last 4 versions", "ios 6"]}
}

gulp-autoprefixerを詳しく見てみる/koltatt

minifier

Minifilerオプションを指定するとコードの圧縮を実行してくれます。
このページの最初の例ではコード見やすくするためにMinifilerをfalseにしていますが、trueを指定するとブラウザが処理するには不要な要素を削除してページの表示速度を改善してくれます。

{
 "minifier": true
}
//stye.scss
body {
  margin: 10 px 20px;
  h1 {
    font-size: 15px;
    font-weight: bold;
  }
  p {
    font-size: 8px;
    color: #606060;
  }
}

//タスクの実行後
body{margin:10 px 20px}body h1{font-size:15px;font-weight:700}body p{font-size:8px;color:#606060}

Sourcemaps

pleeeaseはsourcemapsにも対応していますが、gulp-pleeeaseの場合は例に挙げられているコードの中でpleeeaseとは別にgulp-sourcempapsを読み込んでいるのでそれにならうのが無難だと思います。

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

gulp.task('css', function () {
  gulp.src('./src/*.css', {base: '.'})
    .pipe(sourcemaps.init())
      .pipe(pleeease())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dest'));
});

オプションについて詳しくはgulp-pleeease/Githubpleeease.ioのドキュメントが参考になります。

感想

ドキュメントを見るとわかりますがpleeeaseはautoplefixerなど複数のライブラリを一つにまとめたラッパーライブラリーです。そのため目新しい機能はありませんが、Sassやベンダープレフィックス、Minifyの処理などは常に使用するという場合も多いと思うので一つのライブラリで済むのはやはり便利です。
Preprocessorsに関しては experimental feature となっていてどうやらまだ試験的な部分があるようなのですが安定して使えるならgulpfileのコードが結構削れるので対応に期待したいです。