# gulpでPostCSSを使う方法

URL: https://webrandum.net/gulp-postcss/
公開日: 2019-03-31
更新日: 2019-03-31
カテゴリー: コーディング
タグ: gulp, PostCSS
出典: Webrandum（著者: サイトウ マサカズ）

gulpのプラグインの中にはPostCSSというフレームワークを必要とするものもあります。

今回はgulpでPostCSSを使う方法についてまとめておきます。

## PostCSS

PostCSSは、Node.js製のCSSを操作するプラグインの作成ができるフレームワークです。

PostCSS製のプラグインは有名なものが多く、

- 自動でベンダープレフィックスを付与してくれる「Autoprefixer」

- 次世代のCSSを、モダンな環境にも対応できるように書き換えてくれる「cssnext」

- CSSを圧縮してくれる「cssnano」

- Sassのような変数やextendが使えるようになる「PreCSS」

などがあります。

gulpでPostCSSをインストールする時は、PostCSS製のプラグインを使用する目的なのが一般的になります。

## gulp-postcssのインストール

今回は自動でベンダープレフィックスを付与してくれるAutoprefixerを使用する事を想定してみます。

まず、gulpでPostCSSを使用する時はgulp-postcssというプラグインをが必要なので、それとAutoprefixerをインストールします。

```
$ npm install -D gulp
$ npm install -D gulp-postcss
$ npm install -D autoprefixer
```

## gulp-postcssの使い方

gulp-postcssの使い方は簡単で、タスクの中で`.pipe(postcss(プラグイン名とオプションの設定))`を追加するだけです。

後のオプションは使うプラグインによって変わりますが、Autoprefixerの場合は下記のように記述して、対応するブラウザを指定しています。

```
const gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');

gulp.task('css', () => {
  return gulp.src('./src/css/*.css')
  .pipe(postcss([
    autoprefixer({
    browsers: [
      'last 2 versions',
      'Explorer >= 10',
      'iOS >= 9.0',
      'Android >= 4.1']
    })
  ]))
  .pipe(gulp.dest('./dist/css'));
});
```

Autoprefixerなど、PostCSS製だと単体では動かないプラグインもあって、その時にはgulp-postcssを入れる必要がある。とだけ覚えておけば良さそうです。