実際に自動化された開発環境を制作していきましょう。
自動化処理の流れ↓
- distの中身を消す←今ここ
- 画像、css、html,jsをdistにコピー
- scssをコンパイルする
- プロパティをルール通りに並べる
- プレフィックスを付ける
- pugをコンパイルする
- jsを統合、トランスパイルする
- （監視）画像の追加、名前の変更を検知してdistにコピー
- （監視）scssの変化を検視し、自動コンパイルコンパイル
- （監視）cssの変化を検知してプロパティをルール通りに並べる
- （監視）cssの変化を検知してプレフィックスを付ける
- （監視）jsの変化を検知してファイルを統合、トランスパイルする
- （監視）pugの変化を検知し、コンパイルする
- （監視）ファイルの変更を検知してブラウザを更新する
pugやscssファイルを更新した際はそのファイルを上書きしてくれますが、そのファイルが必要なくなったときは消すことができません。ですので、いらないファイルが蓄積されてします。
それはよくないので、環境を立ち上げた初めに一度distの中を全て消してリセットします。
目次
公開用ディレクトリ、distの中を消す
ディレクトリの中身を消すにはdel-cliパッケージを使用します。
del-cliをインストールしましょう。
yarn add del-cli
package.jsonのscriptsエリアに処理を書いていきます。
"scripts": {
"clean": "del-cli dist/*"
}
del-cliの使い方はdel-cliと書き、続いて、消去したいファイル名を正規表現を使って指定します。
今回はdistの中なのでdist/*とすることでdistの中身全てという意味になります。
他によく使う指示の仕方に消去しないファイルを指定する方法があります。
例えば、distの中のcommonというディレクトリの中のファイルは消去したくなければ以下のように『！』をつければ消去対象から除外されます。
"clean": "del-cli dist/* !dist/common/*"
commonの中のjsファイルだけなら拡張子を指定したりいろいろな書き方があります。ので正規表現で調べて自分の行いたい命令を書いていきましょう。
"clean": "del-cli dist/* !dist/common/*.js"
まとめ
ディレクトリの中身を消すパッケージはdel-cliです。
インストールして、以下のコードをpackage.jsonのscriptsエリアに記載しましょう。
"scripts": {
"clean": "del-cli dist/*"
}
以下のコマンドで実行できますが、今回はまだdistの中に何も存在しないので動作しているか確かめられません。
yarn clean
次の『画像、css、html,jsをdistにコピー』でコピーした後、実行して動きを確かめましょう。
