【JavaScript】npm-scriptsをつかってWEB制作を効率的する(Pug編1)
皆さんこんばんは(^^)今週ずっと雨で寒い日が続いてますね。
今日はHTMLを効率的に書く方法をお伝えします。2回に分けて紹介するのでぜひお試しください。
HTMLを効率的に書く方法としてPugという記法があります。
閉じタグを意識せずにかけるのでコーディングスピードのアップが期待できます。
PugはコンパイルしてHTMLに変換するので今日は環境の構築方法をお届けします。
npm-practice
├ src
│ ├ pug
まずは上記のようなディレクトリを用意します。
npm-practiceの配下にsrcフォルダを置きその下にpugフォルダを置きます。
npm-scriptsのインストール
続いてターミナルまたはコマンドのインストール入力しnpm-scriptsをインストールします。上記をインストールする前にnode.jsのインストールがまだの方はインストールしてください。
※推奨版をインストール。
続いてPugをインストールします。
これをインストールにしないと動かないのでご注意ください🐶
最後にscriptsを利用するためにフォルダに生成されたpackage.jsonファイルに書き記述をします。
"scripts": {
"compile:pug": "pug src/pug/ --hierarchy -o mock/ -P",
"watch:pug": "pug src/pug/ --hierarchy -o mock/ -w -P",
}
上記を記述することでターミナルでPugのコンパイルを実行できwatch:pugは常に変更を監視することができます。以上でPugのセットアップは完了です。
次回記事ではPugの記述方法の基礎をご案内しますのでよろしければ皆さんも体験してみてください。良い週末を＼(^o^)／
ブログ始めました！
— フロントエンドブログ(よーさん) (@frontend_blog23) 2021年8月30日
よろしければ見ていってください！https://t.co/5oZys8GAIq#フロントエンジニア #WEB制作#WordPress
