CSS最適化から圧縮までできる「gulp-pleeease」

はじめに

CSSのベンダープレフィックスの付与はいちいちやると面倒ですよね。必要ないのも書いてしまっていたり。。
今回はそんな問題を解決してくれる、「gulp-pleeease」の紹介です。

gulp-pleeeaseとは

タスクランナーGulpのプラグインのひとつです。
Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。

まずインストール

「Node.js」、「Sass」はインストール済みの想定で進めます。
ディレクトリで下記のコマンドを入力します。
なお、下記のコマンドはMac用です。

「package.json」の作成

npm init

「gulp」のインストール

sudo npm install --save-dev gulp

「gulp-pleeease」のインストール

sudo npm install --save-dev gulp-pleeease

使ってみる

ディレクトリ内は下記のようにフォルダがあるようにします。

— css
— sass
— index.html

今回は「sass」フォルダ内のscssファイルが編集される度に

• ベンダープレフィックスの付与
• メディアクエリを一つにまとめる
• 圧縮して「css」フォルダに出力

といった処理をしてみたいと思います。
エラーがあった場合にも、ファイルの監視を止めさせないようにするため「gulp-plumber」というプラグインも入れています。
「gulpfile.js」には下記を記述します。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var pleeease = require('gulp-pleeease');
 
gulp.task('css', function () {
  gulp.src('sass/*.scss')
    .pipe(plumber())
    .pipe(pleeease({
      sass: true,
      autoprefixer:true,
      minifier: true,
      mqpacker: true
    }))
    .pipe(gulp.dest('css'));
});

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

　

使うには下記のコマンドを入力します。（止めるにはcontrol + c）

gulp

さいごに

複数のプラグインのいいところを取って一つにしたようなプラグインだと思います。
ブラウザのバージョンによる指定もできるので、無駄なベンダープレフィックスの生成を防ぐことができます。
これらのオプションは公式ドキュメントに載っているので参考にして下さい。

これがあればベンダープレフィックスは特に覚える必要はないと思います。
オススメです。