gulp-autoprefixerでベンダープレフィックスを自動で付ける #CSS

gulp-autoprefixerを使えば、CSSのベンダープレフィックスを自動で付けられます。

インストール

$ npm install -D gulp gulp-stylus gulp-autoprefixer

タスクを書く

gulpfile.js

const { src, dest } = require('gulp')
const stylus = require('gulp-stylus')
const autoprefixer = require('gulp-autoprefixer')

const stylusCompile = () =>
  src('./src/**/!(_)*.styl')
  .pipe(stylus())
  .pipe(autoprefixer({
    cascade: false
  }))
  .pipe(dest('./dest/'))

exports.default = stylusCompile

npm run buildのコマンドで実行できるようにpackage.jsonにスクリプトを登録しておきます。

package.json

{
  ...
  "scripts": {
    "build": "gulp"
  }
  ...
}

実際に動かす

下記のようなStylusを書いて

style.styl

.foo
  display flex
  justify-content center
  align-items center

コンパイルすると

$ npm run build

下記のようなCSSが出力されます。

style.css

.foo {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

対応ブラウザを指定する

.browserslistrcをgulpfile.jsと同じ階層に作成すれば、.browserslistrcの内容に応じたベンダープレフィックスを付けられます。

.browserslistrc

last 2 versions
not ie <= 10
> 1% in JP

この状態で、下記のようなStylusを書いて

style.styl

.foo
  display flex
  justify-content center
  align-items center

コンパイルすると

$ npm run build

下記のようなCSSが出力されます。

style.css

.foo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}