gulpでPostCSSを使う方法

2019年3月31日

著者：サイトウマサカズ

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を入れる必要がある。とだけ覚えておけば良さそうです。