Gulp環境でPostCSSを使用する

PostCSSをGulp環境で使用する方法をメモ。

設定方法

Gulpの環境を用意して、gulp-postcssをします。
今回は例としてautoprefixerを使ってみるので、合わせてインストールしておきます。

npm install gulp-postcss --save-dev
npm install autoprefixer --save-dev

gulpfile.jsに設定を記述します。

gulpfile.js

var gulp         = require('gulp');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('css', function () {
  // PostCSSで使用するプラグインを指定
  var plugins = [
    autoprefixer({browsers: ['last 2 version']}),
  ];
  return gulp.src('src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('dest'));
});

srcディレクトリ内のCSSを使って、destディレクトリに生成するようにしました。
srcディレクトリを作成して、その中でtest.cssを作成します。

src/test.css

.hoge {
  display: flex;
}

下記コマンドを実行します。

gulp css

destディレクトリ以下にtest.cssが生成されました。

dest/test.css

.hoge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

【参考サイト】

• gulp-postcss – npm