Nuxt.jsでtemplate部分をpugで記述していたのですがHTMLに書き換えたときのメモです。
なぜやめるのか？
やめた理由はeslint-plugin-vueが効かないからです。
これにより書き方に統一感がなくエラーも自力で発見しないといけないなどもろもろの問題が見えてきました。
他にもソースのサンプルがだいたいHTMLで書かれている、
pugでできることはだいたいvueでもできるなどから
pugからHTMLにすることにしました。
どうやって書き換えるのか？
こちらのツールを利用しました。
vue-pug-to-htmlというのがもともとあったようなのですが
- Jadeにも対応
- テンプレートエンジンのオプションに doctype を指定する
- タグの属性中の HTML Entities の変換
を拡張してくれています。
pug-to-htmlをインストール
npm
npm i -g @plaidev/pug-to-html
yarn
yarn global add @plaidev/pug-to-html
※どちらもglobalにインストールしてください。
yarn add @plaidev/pug-to-htmlでインストールしたら動かなかったので
pug-to-htmlを使ってみる
例: Topのindex.vueを変換するとき
$ pugToHtml pages/index.vue
こちらのcmdを打つと
templateのpugからHTMLに変換してくれます。
一括変換したい。
こちらでpagesディレクトリ以下のvueファイルを一括で変換してくれます。
$ find ./pages -name "*.vue" | xargs -I {} pugToHtml {}
変換させたくファイルがある時
pagesディレクトリのtestフォルダ内は変換したいという場合はこんな風にcmsを打ち込みます。
$ find ./pages -name "*.vue" -not -path "/pages/test/*" | xargs -I {} pugToHtml {}
※こちらはpages配下の分だけなのでcomponents配下の分も必要なら変換しておいてください。
変換後の後処理
無事変換ができたら各vueファイルにESLINTが走り赤波のエラーや黄色波のwarnがでてくるので
それぞれを修正していきます。
※VS Codeを使っている場合の話です。
黄色波のところにカーソルを合わせれば電球マークが表示するのでそこから
Fix all auto-fixable problemsを選択すれば一括で自動修正してくれます。
以上でpugからHTMLに変換できました。
参考：