WordPressのローカル開発環境をつくる
ちあき基本はenvで作成していく
ちあきポートはいつも変更してる。
ちあき@wordpress/scripts でビルドとかlintとかいろいろ設定
ちあきprettierとか追加するパッケージはGutenbergのtrunkに沿うようにする
ちあき今回husky自分ではじめて設定してみるからまずドキュメントよむ
ちあきふむ… lint-stagedと合せ技👀
ちあきphpcsのルールセットは何がいいのかわかんなくていつも他案件からコピってたけど、わからんかったらごちゃごちゃ書かずにとりあえず <rule ref="WordPress"></rule>だけ足しておくのがマシ
ちあきCSSはpostcssを使いたいので postcss.config.js を用意する
ちあき- postcss-import : https://www.npmjs.com/package/postcss-import
- postcss-preset-env : https://www.npmjs.com/package/postcss-preset-env
- postcss-pxtorem : https://www.npmjs.com/package/postcss-pxtorem
- postcss-simple-vars : https://www.npmjs.com/package/postcss-simple-vars
いつもこのへんをつかってる
ちあきpostcss-preset-envのstageはデフォルトでは2
ちあきcssnano
ちあきstart と build の scriptsは src と build のディレクトリを指定する
"start:theme": "wp-scripts start wp-content/themes/theme-dir/src/editor.js wp-content/themes/theme-dir/src/theme.js --output-path=wp-content/themes/theme-dir/build/",
"build:theme": "wp-scripts build wp-content/themes/theme-dir/src/editor.js wp-content/themes/theme-dir/src/theme.js --output-path=wp-content/themes/theme-dir/build/",
ちあきbuild と start で指定できる "build:copy-php": "wp-scripts build --webpack-copy-php", の --webpack-copy-php がちょっとよくわからんぬ
--webpack-copy-php – enables copying all PHP files from the source directory ( default is src ) and its subfolders to the output directory.
ちあき同一ディレクトリの中で複数のブロック扱うときに使うのかなあ。またブロックつくるときに検証してみようかな
ちあき.eslintignoreの書き方は .gitignore と同じように書ける。
インストールしてきたプラグインはlintから除外したいけど、自分で作ったファイルはlintしたいからこういう書き方になる
# WordPress Plugins
wp-content/plugins/*
!wp-content/plugins/my-block-*