Gulp×PostCSSで爆速コーディング！

よしだです。

みなさんCSSプリプロセッサ(CSSメタ言語)、使っていますか?

CSSプリプロセッサを使えば、すばやく、そして、楽にCSSコーディングが行える上、メンテナンス性の高いCSSを設計することができます。

主にどのようなことができるかというと…

• 変数が使える
• 入れ子にできる
• 頻繁に使用する記述を使いまわせる
• プログラミング言語のように関数を定義できる

などなど。
Sass、Less、Stylus等が有名です。

そんな数あるCSSプリプロセッサの中でも日本で流行しつつあるのが今回ご紹介する「PostCSS」です。

PostCSSとは

PostCSSとはAutoprefixerの生みの親であるロシアのAndrey Sitnik氏が開発したCSSプリプロセッサです。

変数やmixin、ネスト、次世代CSS等が使用でき、JavaScript製のプラグインでブラウザが認識できるCSSに変換します。
必要な機能の分だけプラグインをインストールして使えるため、他のCSSプリプロセッサよりも処理速度が早いことが特徴です。
プラグインの数は約200以上あるそうです。

また、Google、Facebook、Githubといった企業やサービスではCSS設計にPostCSSを採用しており、フロントエンド界隈ではおなじみのCODEPEN（HTML、CSS、JSのコードを公開・共有できるサイト）でもPostCSSをサポートしています。

PostCSSの導入方法

今回はタスクランナーのGulpを使用してPostCSSの導入方法を紹介いたします。（Windows環境です）
最終的に以下のディレクトリ構成になっていきます。

まずGulpを使用するためには下記URLよりNode.jsをインストールします。

■Node.js
https://nodejs.org/ja/download/

Node.jsをインストール後、次の手順にしたがってpackage.jsonを作成します。

postcss_test配下で「Shift + 右クリック」で「コマンドウィンドウをここで開く」を選択してください。
以下の黒背景に記述しているコードはコマンドウィンドウに記述してください。

package.jsonを作成します。

npmとはNode.jsのpackageを管理するためのツールのことです。
次にGulpをグローバルにインストールします。

続いて、Gulpをローカルにインストールします。
node_modulesフォルダが生成されます。

PostCSS本体と下記のPostCSSプラグイン、Gulpパッケージをインストールします。

• Autoprefixer(Can I Useに則って適切にベンダープリフィクスを付けてくれます。)
• Nested(CSSを入れ子にできる)
• postcss-import(外部スタイルシートを読み込んでくれる)
• Simple Variables(変数が使える)
• MQPacker(同一のメディアクエリをまとめてくれる)
• gulp-plumber(エラーによる強制停止を防止する)
• gulp-notify(デスクトップにエラーを通知してくれる)

gulpfile.jsを作成し、以下を記述します。
今回はpostcssフォルダ内のファイルを入力元とし、同階層のcssフォルダ内のファイルを出力先としています。

// 入力元
var css_src = './postcss/*.css';

// 出力先
// 配下には同名のCSSファイルが出力される
var css_dest = './css/';

// Gulp
var gulp = require('gulp');

// PostCSS
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var nested = require('postcss-nested');
var cssimport = require('postcss-import');
var simplevars = require('postcss-simple-vars');
var mqpacker = require('css-mqpacker');

// エラーによるタスク監視停止を防ぐ
var plumber = require('gulp-plumber');

// エラーがでたらデスクトップに通知を出す
var notify = require('gulp-notify');

// PostCSS
gulp.task('css', function() {
 var plugins = [
 cssimport,
 simplevars,
 nested,
 autoprefixer,
 mqpacker
 ];
 return gulp.src(css_src)
 .pipe(plumber({
 errorHandler: notify.onError('Error: <%= error.message %>')
 }))
 .pipe(postcss(plugins))
 .pipe(gulp.dest(css_dest))
});

gulp.task('default', function() {
 gulp.watch(css_src, ['css']);
});

最後にコマンドウィンドウで下記を実行します。

まず「import/var.css」を以下のように記述し、保存します。

/* ブレイクポイント */
$sp: 767px;

/* 文字色 */
$red: #e00;

次に入力元の「postcss/style.css」を以下のように記述し、保存します。

@charset "UTF-8";

@import "../import/var.css";

h1 {
 font-size: 23px;
 font-weight: bold;
 color: $red;
 @media only screen and (max-width : $sp) {
 font-size: 15px;
 font-weight: normal;
 }
}

.list {
 overflow: hidden;

 &_item {
 width: 380px;
 float: left;
 @media only screen and (max-width : $sp) {
 float: none;
 }
 }
}

.circle {
 width: 90px;
 height: 90px;
 background: #000;
 transform: rotate(45deg);
}

出力先の「css/style.css」は以下のようになりました。CSSファイルを事前に用意しても良いですが、出力先のフォルダさえ用意すれば勝手にファイルを生成してくれます。

@charset "UTF-8";

h1 {
 font-size: 23px;
 font-weight: bold;
 color: #e00;
}

.list {
 overflow: hidden;
}

.list_item {
 width: 380px;
 float: left;
}

.circle {
 width: 90px;
 height: 90px;
 background: #000;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

@media only screen and (max-width : 767px){

 h1{
 font-size: 15px;
 font-weight: normal;
 }

 .list_item{
 float: none;
 }
}

ブラウザが認識できるCSSファイルが生成されました。

変数の参照やベンダープレフィクスの付与、メディアクエリの整理がきちんと行われていることが確認できます。

上記以外にも便利なプラグインやマニアックなプラグインまでたくさんあります。
下記からプラグイン一覧をチェックできます。

■プラグイン一覧
PostCSS Plugins

おわりに

簡単ではありましたが、PostCSSの概要やGulpでPostCSSを使う方法を解説しました。
PostCSSは他のタスクランナーでも使用できますし、GulpはPostCSSを使う用途に限らずSassの使用やスタイルガイドの作成ができるなど使用幅が広いので、この機会にぜひ使ってみてください。

わたくしは普段はSassを使うことが多いのですが、mixinやextend、関数等はあまり使用していないため、一部の機能しか使っていません。
その点、PostCSSは必要な機能を選択してそのプラグインをインストールすればいいので、処理速度は速く、Sassで悩まされていた文字コードが出力されない問題もなかったので今後はPostCSSを使ってみるのも良いなと思いました。