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 の行が : でカラムを揃えました。
　読むときはこっちの方がいいような気がします。