ベンダープレフィックスを付ける

実際に自動化された開発環境を制作していきましょう。

自動化処理の流れ↓

  1. distの中身を消す
  2. 画像、css、html,jsをdistにコピー
  3. scssをコンパイルする
  4. プロパティをルール通りに並べる
  5. プレフィックスを付ける←今ここ
  6. pugをコンパイルする
  7. jsを統合、トランスパイルする
  8. (監視)画像の追加、名前の変更を検知してdistにコピー
  9. (監視)scssの変化を検視し、自動コンパイルコンパイル
  10. (監視)cssの変化を検知してプロパティをルール通りに並べる
  11. (監視)cssの変化を検知してプレフィックスを付ける
  12. (監視)jsの変化を検知してファイルを統合、トランスパイルする
  13. (監視)pugの変化を検知し、コンパイルする
  14. (監視)ファイルの変更を検知してブラウザを更新する

IEに対応するためにコンパイルしたcssにベンダープレフィックスを自動でつけていきます。[user_help]ベンダープレフィックスについてはこちらを参照[/user_help]

目次

プレフィックスを自動でつけよう

プレフィクスを自動でつけるためにはpostcsspostcss-cliautoprefixerを使用します。

postcss-cliは前回インストールしていますので今回はpostcssとautoprefixerの2つのインストールになります。

処理は同じsortingで書いたコードで行え、こちらも設定ファイルが必要ですが、設定も同じpostcss.config.jsに追加記載で行えます。

postcssをインストールします。

yarn add postcss

autoprefixerをインストールします。

yarn add autoprefixer

今回はpackage.jsonのscriptsにの処理自体には変化はありませんがsortingという名前が合わないのでautoprefixerに変更しました。

"scripts":{"autoprefixer":"postcss -o dist/common/css/app.css src/scss/_app.css"}

postcss.config.jsに設定を書く

以下のようにpostcss.config.jsに設定を記載します。

module.exports={plugins:[require('autoprefixer')({browsers:["last 2 versions","not ie < 11","Android >= 4","iOS >= 10"],grid:true}),require('postcss-sorting')({"order":["at-rules",{"type":"at-rule","name":"charset"},---長いので省略---],"unspecified-properties-position":"bottom"}

前回のプロパティの並び替えのルール設定の plugins:[]の中に以下のコードを追加しただけです。

require('autoprefixer')({browsers:["last 2 versions","not ie < 11","Android >= 4","iOS >= 10"],grid:true}),

browsers:[]の部分で対応させたいブラウザのバージョンを指定することができます。

実行して動作確認

実際に動かして動作確認を行います。

scssは前回のプロパティーの並び替えで使用したapp.scssをそのまま使用します。

.hogeClub {color:#ff0000;&.hoge {height:auto;background-color:#000;display:flex;width:100%;padding:10px;margin-top:10px;&.huga {color:#00ff00;}}}

以下のコマンドをVS Codeのターミナルに入力して実行しましょう。

yarn wathc

実行したらdist/common/cssの中にあるapp.cssを確認しましょう。

display:-webkit-box;この部分が自動付与したプレフィックスです。

きちんと動作していますね。

まとめ

プレフィクスを自動でつけるためにはpostcssとpostcss-cliとautoprefixerのパッケージが必要です。

postcss-cliは前回インストールしたのでインストール不要です。

postcssをインストールします。

yarn add postcss

autoprefixerをインストールします。

yarn add autoprefixer

package.jsonのscriptsは前回のsorting(autoprefixerに名前を変更しました)がそのまま使用できるので変更する必要はありません。一応記載しておきます(package.jsonのscripts全体)

"scripts":{"build":"npm-run-all -s clean copy:mock copy:js css autoprefixer","watch":"npm-run-all -p","clean":"del-cli dist/*","copy:mock":"cpx \"./src/mock/**/*.{html,png,jpg,svg,gif}\" ./dist -v","copy:js":"cpx \"./src/js/{first,vendor}.js\" ./dist/common/js","css":"node-sass --include-path scss src/scss/app.scss src/scss/_app.css --output-style nested --indent-type space","autoprefixer":"postcss -o dist/common/css/app.css src/scss/_app.css",}

postcss.config.jsのplugins:[]の中に設定を追加します。

module.exports={plugins:[require('autoprefixer')({browsers:["last 2 versions","not ie < 11","Android >= 4","iOS >= 10"],grid:true}),require('postcss-sorting')({"order":["at-rules",{"type":"at-rule","name":"charset"},---長いので省略---],"unspecified-properties-position":"bottom"}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

目次