gulp-autoprefixerでtransformプロパティに-ms-プリフィックスを付けたい

Question

###▼実現したいこと
タイトルの通りです。

現在、gulp-autoprefixerで自動的にプリフィックスをつけているのですが、
ふと実際に書きだされたCSSを見てみたところ、transformに-webkit-プリフィックスしかついていませんでした。
-ms-プリフィックスをつければ2D transformが機能することは分かっているので、できれば念のため-ms-もつけておきたいと考えています。

###▼現在のコード

gulp.task('sass', function () {
  return sass('./src/html/common/sass/*', {style: 'expanded'})
    .on('error', sass.logError)
    .pipe(plumber())
    .pipe(autoprefixer())
    .pipe(plumber.stop())
    .pipe(gulp.dest('./src/html/common/css/'))
    .pipe(browser.reload({stream:true}))
});

上記のように、sassをコンパイルするtaskの中にautoprefixerを挟んで利用しています。
オプション指定無しでコンパイルした状態では-ms-transformは出力されませんでした。

###▼試したこと

.pipe(autoprefixer({ browsers: ['last 4 versions'] }))

とか

.pipe(autoprefixer({ browsers: ['last 2 versions', 'IE 9'] }))

のようにgulpfile.jsの中身を書き換えてみましたが、結果は変わりませんでした。

###▼アドバイス頂きたいこと
どのようなオプション指定をすれば-ms-transformも出力されるようになるのか、
サンプル、もしくは参考情報が掲載されたブログ等のURLをご教授いただけないでしょうか。

あとはもし、gulp-autoprefixerに何らかのバグがあるとかが原因であれば、
何か情報をいただけますと助かります。

よろしくお願い申し上げます。

Answer 1

【GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use】
https://github.com/postcss/autoprefixer

last 2 versions or > 5%.

上記URLに書かれている要件ではIE9が対象にならないから付いていないのだと思います。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=transforms2d
（IE10はなかったんや…）

gulpは使ったことがないのですが、下記2つのURLから多分こう書くのでは、というものを提示しておきます。参考になればよいのですが･･･。

gulp.task('default', function () {
	return gulp.src('src/app.css')
		.pipe(autoprefixer({
			browsers: [ 'last 2 versions', 'ie 9' ],
			cascade: false
		}))
		.pipe(gulp.dest('dist'));
});

【gulp-autoprefixer】
https://www.npmjs.com/package/gulp-autoprefixer

【css - Gulp Autoprefixer Not Working - Stack Overflow】
http://stackoverflow.com/questions/28074093/gulp-autoprefixer-not-working

Comments

[aKusano]

わざわざ調べていただきましてありがとうございます！

>>last 2 versions or > 5%.

オプション指定しなかった場合にはこの条件でDBから自動的に判断されて
プリフィックスの有無が決まる仕様なので、特定の環境を含めたければやはり
オプションの指定を入れておかないと危険なのですね。

ちなみにこの質門を書いたりいろいろ試したりしている間に、

・-ms-transform　→追加される
・-webkit-display-box　→追加されない

という状態に勝手に変わってしまう謎現象が起きていたのですが、
ちょうど今このタイミングで判断材料が変わってしまったということかもしれませんね。
（長期の開発やってる場合はヤバイですね）

今回、IE9だけでなくAndroid4.0+の対応もしなくてはいけなかったため、
デフォルトでAndroid4.0+の指定が消えてしまったのはかなり痛かったのですが
いろいろ試した結果、ひとまずこちらで望むコードが書き出されるようになったようです。

.pipe(autoprefixer({
browsers: ['last 4 versions', 'ie 9', 'ie 10', 'android 4'] }))

ご提示いただいた書式に、更に必要な環境を追加してみた形です。
（cascade:falseはコードの整形をしない指定だったので関係無かったみたいです）

あと、最初にいろいろ試している時に、実は検証方法が間違っていたことが発覚しました。

・gulpfile.js修正→gulpタスク実行（watch）→sourcetreeで差分コードを確認

とやっていて、「変わらないなぁ？」となっていたのですが、
実際にはsassのコードを書き換えたタイミングでしかsassが動かないので、
上記の方法ではそもそも書き換わるわけがなかったという次第です(；´Д｀)

もうちょっと早く気づいていればお手を煩わすこともなかったかもしれないのですが、、
これも初心者あるあるですかね。。。以後気をつけます。