無駄なベンダープレフィックスを書くのはもう辞めよう。~gulp-Autoprefixerを使ってみた~

よろしければシェアお願いいたします

無駄なベンダープレフィックスを書くのはもう辞めよう

そのベンダープレフィックス、本当に必要ですか?

Autoprefixerとは

今回ご紹介する「Autoprefixer」は、対象とするデバイスを指定するだけでベンダープレフィックスを自動付与してくれます。
使用にはgulpの導入が必須となりますので、まだ導入されていない方は
ノンエンジニアでも簡単に出来るgulp導入を参照下さい。

毎回対象となるベンダープレフィックスを調べてるという方や、ちょっとでも無駄を省いたCSSを目指している方はぜひ試してみてください。

Autoprefixerの導入

ではさっそくAutoprefixerをインストールしていきます。

コマンドラインで下記を実行するだけです。

正しくインストール出来たか確認したい方は、こちらを実行して下さい。

「gulp-autoprefixer@x.x.x」という表示があればOKです。
※package.jsonのdevDependenciesを一覧で表示してくれています

タスクを作成する

次に、今回対応させるデバイスなどをタスク内に記述していきます。

まず、package.jsonがあるディレクトリに下記jsを作成してください。

ファイル名:gulpfile.js

1つずつ解説していきます。
まずこちら2行の記述ですが、gulpとAutoprefixerの読み込みとなりますので必ず記述をしてください。

次にタスクの設定値についてです。

①task-name
→タスク名を記述してください。

②css/*.css
→コンパイルしたいCSSのパスを記述してください。

③last 2 version’, ‘ie 8’, ‘iOS >= 8’, ‘Android >= 4
→対象となるデバイスとバージョンを指定してください。
この設定では、IE8,IOS8,Android4、その他は最新2バージョンに対応するベンダープレフィックスを付与します。

④test
→コンパイルしたcssのはき出し先を指定してください。
この場合は、gulpfile.jsがある階層に「test」というディレクトリが作成されその中にコンパイル後のcssがはき出されます。

上記で設定したタスクを実行してみます。

実際にコンパイル結果を確認してみます。

コンパイル前

コンパイル後

ベンダープレフィックスが追加されていることが確認できました。
これでコーディングの時間も短縮できるようになるのではないでしょうか。

まだ導入されていない方は、ぜひ試してください。

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1