PostCSSでSassをもっと楽に

gulpのタスクを追加して便利な環境にしよう ← 前回のやつ

PostCSS

PostCSSプラグイン　PostCSS.parts

その他プラグイン一覧

プラグイン名	プラグイン機能	参考ページ
stylelint	CSSの構文チェックツール	stylelintの環境構築
column	stylelint	column
will	stylelint	will
be	stylelint	be
left	stylelint	center
aligned	stylelint	aligned

PostCSSのインストール

まずは、npmから「gulp-postcss」パッケージをインストール

cmd

npm install --save-dev gulp-postcss

パッケージをインストールしたら、gulpfile.jsに読み込みの設定をします。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
// 「gulp-postcss」を読み込む
var postcss = require('gulp-postcss');

ベンダープレフィックスを自動付与する

Autoprefixerはベンダープレフィックスを自動付与してくれるプラグインでPostCSSでは一番よく使われてる定番プラグインです。
Autoprefixerがあれば、わざわざベンダープレフィックスを記述する必要がなくなります。

インストールと設定

まずは、npmから「gulp-autoprefixer」パッケージをインストール

cmd

npm install --save-dev gulp-autoprefixer

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([autoprefixer()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
// 「gulp-autoprefixer」を読み込む
var autoprefixer = require('autoprefixer');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    // 「sass」の後に指定
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

その他に、対象ブラウザを設定したり、バージョン指定することなどもできます。

CSSプロパティの記述順を自動でソートする

CSSプロパティの順番を気にする方用に「css-declaration-sorter」

インストールと設定

まずは、npmから「css-declaration-sorter」パッケージをインストール

cmd

npm install --save-dev css-declaration-sorter

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([cssdeclsort({order:'smacss'})])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

// 「css-declaration-sorter」を読み込む
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))

    // 「sass」の後に指定
    .pipe(postcss([cssdeclsort({order:'smacss'})])
    // alphobetically アルファベット順に
    // smacss SMACSSが定義するレイアウトに最も重要な順に
    // concentric-css Concentric CSSが提唱するボックスモデルの外側から内側の順に

    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

バラバラになったメディアクエリをまとめる

「CSS MQPacker」を使えば、バラバラに記述されたメディアクエリをまとめてくれます。

インストールと設定

まずは、npmから「css-mqpacker」パッケージをインストール

cmd

npm install --save-dev css-mqpacker

パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([mqpacker()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var assets = require('postcss-assets');
var cssdeclsort = require('css-declaration-sorter');
// 「css-mqpacker」を読み込む
var mqpacker = require('css-mqpacker');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    // 「sass」の後に指定
    .pipe(postcss([mqpacker()]))

    .pipe(postcss([cssdeclsort({order:'smacss'})])
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});