TIPS

preprosを使ってpug(jade) とscss を上手にコンパイルして理想のフォルダ構成を作る

2020.03.20

2020/03/20

TOP TIPS Tool preprosを使ってpug(jade) とscss を上手にコンパイルして理想のフォルダ構成を作る

僕はタスクランナー(GULP)ではなく、コンパイルはpreprosを使用しています。フォルダ構成をしっかりと整理するだけでコーディングが楽になります。

理想のフォルダ構成

ルートフォルダにindex.htmlがあり、同階層にassetsフォルダがあるのが理想的です。同階層の「pug」フォルダをhtmlに変換する一式を格納します。こうすることでフォルダ内がすっきりして管理しやすいです。

  • index.html
  • pug
  • – _include
  • – index.pug
  • assets
  • – scss
  • – css
  • – images
  • – js
    prepros.config

prepros とは

scssをcss、pug(jade)をhtmlにコンパイルしてくれるアプリです。無料ライセンスありますが、僕は有料ライセンスを利用してます(有料ライセンスの催促が煩わしいので購入しました)。

https://prepros.io/

preprosの設定

基本的に編集する設定は「HTML Tools」のみです。

HTML Tools 設定

pugファイルをhtmlに変換するルールを決めます。編集する箇所はOutputの中のラジオボタンを「Replace Segments」にしてSegmentを「pug」、Replace Withを「./」にします。デフォルトではReplace Withが「HTML」になっているのでフォルダ構成が微妙な感じになってしまいます。「./」にすることで解決です。