i see! Web Creatives Blog
gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう
gulp-autoprefixerはもう古いかも?
css3を使ってスタイルを記述する際にベンダープレフィックスを自動で付けてくれるgulp-autoprefixer。とても便利ですよね。
しかし、gulp-autoprefixerよりも高機能でいい感じなのが、pleeeaseです。pleeeaseはベンダープレフィックスを付けてくれるだけでなく、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx変換などをいっぺんに処理してくれます。
gulpで簡単に使うことができるので、早速導入してみましょう。
gulpって??という方→GulpでSassのコンパイルとlivereloadをやってみる
gulp-pleeeaseのインストール
ターミナルで任意の作業ディレクトリまで移動したらgulpのインストールと、今回使うプラグインgulp-pleeease、sassをコンパイルするためのgulp-ruby-sassをインストールします。
cd 作業ディレクトリパス
npm install gulp
npm install gulp-pleeease gulp-ruby-sass --save-dev
sassファイルも用意し、以下のような構成を作ります。
├package.json
├gulpfile.js
├node_modules
├gulp
├gulp-pleeease
├gulp-ruby-sass
├sass
├style.scss
sassファイルはこのような感じのものを使ってみたいと思います。
$color: #fff;
@mixin media($size){
@media screen and (max-width : $size){
@content;
}
}
html{
background: #F6F7EF;
}
a{
background: #F6F7EF;
}
body{
font-size: 15px;
margin: 0 auto;
}
h1{
font-size: 1.5rem;
}
@include media(980px){
body{
color: "#ccc";
}
}
@include media(980px){
h1{
color: "#ccc";
}
}
.box{
color: #000;
overflow: hidden;
display: flex;
flex-direction: column;
background: linear-gradient(red, blue);
@include media(768px){
color: #ccc;
font-size: 1rem;
}
div{
float: left;
text-align: center;
width: 30%;
}
p{
margin: 10px;
@include media(768px){
float: left;
}
a{
display: block;
}
}
}
gulpfileに設定を記述
続いてgulpfile.jsに設定を記述していきます。設定は以下のように記述します。
sassやwatchについての解説は前回の記事を参考にしてみてください。
GulpでSassのコンパイルとlivereloadをやってみる
var $, gulp;
gulp = require('gulp');
sass = require('gulp-ruby-sass');
pleeease = require('gulp-pleeease');
gulp.task('sass', function() {
return gulp.src('./sass/*.scss').pipe(sass({
style: 'expanded'
})).pipe(gulp.dest('./css'));
});
gulp.task('ple', function() {
return gulp.src('./css/*.css')
.pipe(pleeease())
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function() {
gulp.watch(['./sass/*.scss'], ['sass']);
return gulp.watch(['./css/*.css'], ['ple']);
});
gulp.task('default', ['watch']);
ハイライト部分がpleeeaseの設定になります。まずは何もオプションを付けずに使ってみます。gulpを実行してみましょう。
gulp
html{background:#F6F7EF}a{background:#F6F7EF}body{font-size:15px;margin:0 auto}h1{font-size:24px;font-size:1.5rem;display:inline-block}.box{color:#000;overflow:hidden;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)}.box div{float:left;text-align:center;width:30%}.box p{margin:10px}.box p a{display:block}@media screen and (max-width: 980px){body{color:"#ccc"}h1{color:"#ccc"}}@media screen and (max-width: 768px){.box{color:#ccc;font-size:16px;font-size:1rem}.box p{float:left}}
デフォルトのまま実行すると、圧縮とremのpx変換とメディアクエリをまとめてくれるようです。
pleeeaseのオプション
デフォルトでremの変換とメディアクエリをまとめてくれるのはいいですが、圧縮は最後の仕上げでやりたい。という場合があります。そういった場合でもオプションで簡単に設定することができます。また、ベンダープレフィックスもまだ付いていないので付けてみましょう。
gulpfile.jsのpleeeaseの設定部分を編集します。
var $, gulp;
gulp = require('gulp');
sass = require('gulp-ruby-sass');
pleeease = require('gulp-pleeease');
gulp.task('sass', function() {
return gulp.src('./sass/*.scss').pipe(sass({
style: 'expanded'
})).pipe(gulp.dest('./css'));
});
gulp.task('ple', function() {
return gulp.src('./css/*.css')
.pipe(pleeease({
fallbacks: {
autoprefixer: ['last 4 versions'] //ベンダープレフィックス
},
optimizers: {
minifier: false //圧縮の有無 true/false
}
}))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function() {
gulp.watch(['./sass/*.scss'], ['sass']);
return gulp.watch(['./css/*.css'], ['ple']);
});
gulp.task('default', ['watch']);
ハイライト部分がオプションを追加した箇所になります。control+cでgulpを一旦止めてもう一度gulpコマンドで実行してみましょう。
html {
background: #F6F7EF;
}
a {
background: #F6F7EF;
}
body {
font-size: 15px;
margin: 0 auto;
}
h1 {
font-size: 24px;
font-size: 1.5rem;
}
.box {
color: #000;
overflow: hidden;
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-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
.box div {
float: left;
text-align: center;
width: 30%;
}
.box p {
margin: 10px;
}
.box p a {
display: block;
}
@media screen and (max-width: 980px) {
body {
color: "#ccc";
}
h1 {
color: "#ccc";
}
}
@media screen and (max-width: 768px) {
.box {
color: #ccc;
font-size: 16px;
font-size: 1rem;
}
.box p {
float: left;
}
}
いい感じに展開されましたね。この他にも疑似要素のコロン2つを1つにして、IE対策をしてくれたりもするようです。
gulpでメディアクエリをまとめるプラグインを探してたんですが、pleeeaseはすごく良かったので、これからも使おうと思います。
参考にさせていただいたサイト
コメントを残す
CATEGORY
KEYWORD
Profile
1990年7月11日生まれ 左利き
フロントエンドエンジニアとして
WEBサイトを制作しています。