HTML - Autoprefixer - 動作確認

 
1. .css 作成
2. gulpfile.js 作成
3. 実行

1. .css 作成

 参考サイトに習って、プロジェクトのディレクトリ(ここではいまんとこ ~/npm)に src ディレクトリと .css ファイルを作成してみます。

> cd ~/npm
> mkdir src
> cd src
> touch test.css
 とりあえず、ベンダープレフィックスの動きが確かめてみたいので test.css の中身は
・参考サイトにある display: flex;
・結構苦労している tab-size: 4;
・これも苦労している white-space: pre-line;

 を書いてみました。


test
{
	display: flex;
	tab-size: 4;
	white-space: pre-line;
}

2. gulpfile.js 作成

 どこに gulpfile.js を作成するかがわからないので、作成して試してみるしかない。  (参考サイトのシンタックスハイライトは Gulp があるようですが、prism.js にはなさげなので javascript で代替)

var gulp = require("gulp");
var autoprefixer = require("gulp-autoprefixer");

gulp.task("default", function () {
    return gulp.src("src/test.css")
        .pipe(autoprefixer({
            browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
            cascade: false
        }))
        .pipe(gulp.dest("dist"));
});
 7行目の browsers ってのがミソのようで、対応するブラウザを記述しているそうな・・・。  このあたり、じっくり調べる必要がありそうですが・・・。とりあえず、先を急ぐので。  参考サイトでは「IEは 9 以上、Android は 4 以上、iOS Safari は 8 以上、その他は最新 2 バージョンで必要なベンダープレフィックスを付与する設定」なのだそうな・・・。

3. 実行

 では準備できたので実行してみます。

> cd ~/npm
> ~/npm/node_modules/.bin/gulp
[09:29:15] Using gulpfile ~/npm/gulpfile.js
[09:29:15] Starting 'default'...
[09:29:15] Finished 'default' after 84 ms
 結果、できあがった ~/npm/dist/test.css の中身は

test
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	white-space: pre-line;
}
 ってことで、display は、そりゃ参考サイトのようになりますわな。  tab-size は予想通りの上々のでき。  white-space ってのが予想外、既に方言はなくなっているの?

            cascade: false
 を true にすると tab-size の行が : でカラムを揃えました。  読むときはこっちの方がいいような気がします。