gulp-autoprefixerを使えば、CSSのベンダープレフィックスを自動で付けられます。
インストール
$ npm install -D gulp gulp-stylus gulp-autoprefixer
タスクを書く
gulpfile.js
const{src,dest}=require('gulp')conststylus=require('gulp-stylus')constautoprefixer=require('gulp-autoprefixer')conststylusCompile=()=>src('./src/**/!(_)*.styl').pipe(stylus()).pipe(autoprefixer({cascade:false})).pipe(dest('./dest/'))exports.default=stylusCompilenpm run buildのコマンドで実行できるようにpackage.jsonにスクリプトを登録しておきます。
package.json
{..."scripts":{"build":"gulp"}...}実際に動かす
下記のようなStylusを書いて
style.styl
.foodisplayflexjustify-contentcenteralign-itemscenterコンパイルすると
$ 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
.foodisplayflexjustify-contentcenteralign-itemscenterコンパイルすると
$ 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;}