実際に自動化された開発環境を制作していきましょう。
自動化処理の流れ↓
- distの中身を消す
- 画像、css、html,jsをdistにコピー
- scssをコンパイルする
- プロパティをルール通りに並べる
- プレフィックスを付ける←今ここ
- pugをコンパイルする
- jsを統合、トランスパイルする
- (監視)画像の追加、名前の変更を検知してdistにコピー
- (監視)scssの変化を検視し、自動コンパイルコンパイル
- (監視)cssの変化を検知してプロパティをルール通りに並べる
- (監視)cssの変化を検知してプレフィックスを付ける
- (監視)jsの変化を検知してファイルを統合、トランスパイルする
- (監視)pugの変化を検知し、コンパイルする
- (監視)ファイルの変更を検知してブラウザを更新する
IEに対応するためにコンパイルしたcssにベンダープレフィックスを自動でつけていきます。[user_help]ベンダープレフィックスについてはこちらを参照[/user_help]
プレフィックスを自動でつけよう
プレフィクスを自動でつけるためにはpostcssとpostcss-cliとautoprefixerを使用します。
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"}