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」パッケージをインストール
npm install --save-dev gulp-postcss
パッケージをインストールしたら、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」パッケージをインストール
npm install --save-dev gulp-autoprefixer
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([autoprefixer()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。
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」パッケージをインストール
npm install --save-dev css-declaration-sorter
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([cssdeclsort({order:'smacss'})])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。
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」パッケージをインストール
npm install --save-dev css-mqpacker
パッケージをインストールしたら、gulpfile.jsに読み込みの設定とpostcss([mqpacker()])を追記します。
Sassのコンパイル後に処理したいので、sassより後に記述します。
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'));
});