WebDesigner's Memorandumウェブデザイナーの備忘録

gulpでPostCSSを使う方法

gulp-postcss

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね