CodeCodeCodeCodeなんか色々おぼえ書き。だいたいweb制作関連。未来を先取るPostCSS2016.11.15コーディングCSSPostCSS現在のweb制作はSassを使うのが当たり前になり、もうSassなしでは開発ができないくらいまでに恩恵をもたらしてくれました。Sassが登場してから10年がたち次世代CSSの声が聞こえはじめました。そこで、海外のフロントエンド界隈で普及しつつある、「PostCSS」をgulp環境で使ってみたので、簡単な書き方と概要をまとめました。GitHubPostCSSとはPostCSSのメリットPostCSSのデメリットPostCSS導入PostCSSのプラグインまとめPostCSSとはPostCSSとは、JavaScriptで書かれた次世代CSSを変換するためのツールです。PostCSSは、ES2015を現行のJavaScriptにトランスポートする「Babel」と同じで、未来のcssを現行のcssに翻訳してくれます。PostCSS自体は、はあくまで変換するツールで、必要な機能をプラグインとして自分で取捨選択し、機能拡張していきます。PostCSSのメリット次世代CSSを先取りできることが一番大きなメリットです。仮に将来、SassやPostCSSが開発終了になっても、そのころにはブラウザが次世代のCSSを読み込めるようになっているはずなので、あらたに何かを探し、勉強する必要はありません。PostCSSのデメリットPostCSSは、必要な機能をプラグインとして機能拡張していくといいました。これがデメリットをうみます。他の人が読めない・書けないCSSになってしまいます。プラグインのデファクトスタンダードになりつつある、cssnextに含まれるプラグインのみ使うなどのルールが必要です。この後の説明もcssnextに含まれるプラグインを中心に、cssnextには含まれていませんが、記法とは直接関係ない便利なプラグインの導入方法をまとめています。PostCSS導入すでにgulpを使ってる方は読み飛ばしてください。initプロジェクトの初期設定が始まりますが、わからないところはenterで飛ばして、分かるところだけ記入で問題ありません。gulpのコマンドが使えるように、グローバルインストールします。gulp次に、プロジェクトディレクトリに移動してローカルインストールします。gulpこれでgulpの設定は完了です。PostCSSのインストールgulp用のPostCSS本体をインストールします。gulp-postcssデモの階層はこんな感じです。設定を書いていきます。[\'watch\']);PostCSSのタスクだけ抜き出してみると、非常に単純です。postcssディレクトリにあるcssファイルを読み込んできて、postcss実行して、cssディレクトリに書き出す。