JavaScript chobi

Pugを使ってみる(環境構築～自動コンパイルまで)

はじめに

【駆け出しエンジニア用】素のJavaScriptで簡単Twitter投稿サービス

上述のサービスを作ってみてアップデートしたい点がいろいろ出てきたのでPugの勉強がてら試してみます。

リポジトリ

今回改修したい点

HTMLファイルが冗長⇒Pugを使ってみる

命名規則が適当⇒BEMなり調べながら変更してみる

✅ゴール
・Pugの理解を深める

✅環境
Windows

Pugの環境構築

既になかなかに冗長になってしまっているhtmlファイルを改善したいと思い試してみました。

参考：

[Pug] HTMLを効率よくコーディングする

基本的な記法。ソースファイルもあった。

src/test.pugを作成

p Pug Test

gulpfile.jsを編集(ver4用にコールバック関数を記載しています)

var gulp = require('gulp');
var pug = require('gulp-pug');

gulp.task('pug', function (cb) {
    gulp.src(
        ['./src/**/*.pug', '!./src/**/_*.pug']
    )
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./dist'))

        cb();
});

🙄src/**/ディレクトリ下の.pugファイルがコンパイルされるのがわかりますね！

実行

gulp pug

もしくはpackage.jsonを編集

"scripts": {
  "dev": "gulp pug"
},

実行

npm run dev

HTMLファイルの生成を確認できました。

🙄これで効率よくコードが書けるはず！！

Pugを使ってみる

参考：[Pug] HTMLを効率よくコーディングする、Pugの記法まとめ

とりあえず以下のような形にはできました。

※\nがコンパイルすると改行されてしまうのでそこだけできていない。

命名規則について調べた

Pugで書きながら気になった点は随時調べてみました。

参考：

コーディングガイドラインHTML5版

恥ずかしながらこういうの始めてみました。。。とても参考になります。
※jsはheadタグで読み込まないと。

ファイル名やclass名にはアンダーバー（_）を活用しよう

ダブルクリックで_だと連結された単語を選択できて、-だと選択できないのは初めて知りました。リファクタリング時に効果を発揮しそうです。

逆に-で変更したい部分だけ変更できるようにしておくという使い方も。ケースバイケースですね。

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]

これも参考になる。

htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか

cssは一般的にハイフン文化らしい。

Javascriptのコーディングスタイルを復習 – Google編

JS特化の命名規則。これとても参考になる。

変数も基本キャメルケース。定数が大文字スネークケース！！

隠蔽したいファイルには_を頭文字。

👇個人的な結論

JS併用の場合、class属性(書式はアンダーバー>ハイフン)はcss専用。id属性(書式はCamel)はjs専用。

これを踏まえてPugのコードを見直していきたいと思います。

リファクタリング

リファクタリングした内容を記載します。

・「:」+半角スペースで改行せずに入れ子できるみたいなので変更

・変数の活用

参考：【備忘録】pug の変数の書き方いろいろ

・for文活用

ちなみにこれだと

li number#{n}
- for (var n = 1; n < 3; n++)
  li number#{n}
li number#{n}
li number#{n}
  li number#{n}

こうなる

<li>number</li>
<li>number1</li>
<li>number2</li>
<li>number3</li>
<li>number3
  <li>number3</li>
</li>

🙄for文以下でインデントされたものに対して適用(※HTML書き出し時にインデントの影響は受けない)。また、変数は保持される。少し慣れが必要ですね

結果こんな感じになりました。左がpugで右がhtmlです。ぼちぼち改修しやすいコードにできたかと思います◎

追加機能を実装する

※以下、完全なる思い付きです。

①定型文の作成

②タグを選択できるようにする

調べたもの

・labelタブのfor属性に関して　参考

<label for="ラベル付け対象要素のid属性値"></label>

・selectタグの値の取得

色々調べましたが、結果selectタグのidを取得して、.valueでアクセスすればoptionタグの値を取得できました。とてもシンプル！！

・selectタグのイベント　参考

changeイベントなるものがあった！便利！！

👇諸々変更してこんな感じになりました。

✅更なるリファクタリング

①コードのリファクタリング

②ハッシュタグが未入力でも#だけ追記されてしまっていたのでif文で入力されないように処理。

index.pugのセレクトハッシュタグ部分の簡略化。

上部に変数で定義。

🙄だいぶすっきり！かつ変更もしやすくなりました◎

同様にindex.jsのセレクトハッシュタグ部分のクリックイベントをforEach文で簡略化。

🙄だいぶ短く記述できました◎

この時点でこんな感じ。

自動コンパイル

せっかくなので最後に挑戦してみました。

参考：絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順

一回見てたけど、よく見たらかなり丁寧にGulpfileの説明あった。

どうやら自動コンパイルにはwatch機能を使うらしい。

gulp.watch('監視するファイル', 処理)

見よう見まねで以下で自動コンパイルできました。

👇ソースコード

躓いた点

✅npx gulpできない

どうやらgulpのタスクをdefaultにするべきぽい。

> npx gulp
[19:34:23] Using gulpfile C:\xampp\htdocs\tweet-share\gulpfile.js
[19:34:23] Task never defined: default
[19:34:23] To list available tasks, try running: gulp --tasks

gulpfile.jsを変更

// gulp.task('pug', () => {
gulp.task('default', () => {

これで実行できるようになりました◎

🙄ちなみにこれに伴いgulp pugが実行できなくなったのでgulp タスク名でどうやらpugは実行されるらしい。。

✅配列にオブジェクトを入れたい場合の定義

ハッシュタグのセレクトタグの部分が思いっきり繰り返していたのでeach文を使っていきます。

参考：Pug : for文、each文でリストをループ出力する

div
  -
    const hashtag = [
      {
        name:"Popular",
        default:"#人気タグ",
      },
      {
        name:"Language",
        default:"#言語",
      },
      {
        name:"Framework",
        default:"#フレームワーク",
      },
      {
        name:"Various",
        default:"#いろいろ",
      }
    ]
  p #{hashtag[0].name}
  each item in hashtag
      li item #{item.name} : #{item.default}

🙄配列にオブジェクトを入れたい場合は定義の仕方が独特でハイフンの後改行が必要っぽいです。また、each文対象の部分はインデントが1つずれます。地味にハマりました。。。

✅バックスラッシュがエスケープされてしまう

;などは属性値の=を!=すればよかったのですが、バックスラッシュに関しては色々調べましたが未解決です・・・

⇒\nでできました。

✅The following tasks did not complete: pugと出た場合

参考：gulp ejs で The following tasks did not complete: ejs が出たときの対処法

gulp4では明示的にタスクの終了を返す必要があるらしい。

おわりに

予想以上にPugの環境構築だけで時間(約1時間半)がかかりましたが、無事使うことができました。

既にべたのhtmlは記述したくないかもといった感じでPugの威力を実感しました。

✅参考

gulp-pug(公式)

gulp(公式)

絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順

※上記記事はPugの構築はなし

GruntではJSON形式で独特の記述方法であるのに対し、GulpはJavaScriptで記述可能
Gruntでは基本的に同期処理であるためタスクは1つずつ実行されますが、Gulpでは基本的に非同期処理

グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的！！OMG！！

個人的備忘録

✅Pugを使うまでの奮闘記①グローバルにいれちゃう(※失敗)

とりあえずインストールします。

Package.json作成

npm init

諸々インストール

npm i pug
npm i gulp
npm i gulp-pug

pugがらHTMLへの変換

gulp pug

※この状態だと、bash: gulp: command not foundでエラーがでました。

公式に従ってgulpをインストール

npm install --global gulp-cli
npm install --save-dev gulp
gulp --version
>> CLI version: 2.3.0
   Local version: 4.0.2

参考：絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順

🙄調べたところ上記の方法一般的ではないらしい。。。

✅Pugを使うまでの奮闘記②パッケージ過多&gulpfileの書き方わからず失敗

以下、仕切り直して。。。

GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする
2019年版：Gulp4でSassをビルドしてBrowserSyncでライブプレビューする

※上述はGulpのVer3での記事。4は若干違うとのこと。gulp.task()の中でちゃんとreturn()で返してやらないとダメとのこと。ただ後述の4ではPug使っていない。。。

Gulp4設定まとめ(Pug/Sass)

※こちらは各パッケージ(多い)の説明含め記載してくれている。

インストール

npm i gulp -D
npm i gulp-notify -D
npm i gulp-plumber -D
npm i gulp-sass -D
npm i gulp-autoprefixer -D
npm i gulp-pug -D
npm i -D gulp-uglify
npm i browser-sync -D
npm i -D gulp-cssmin
npm i -D del

🙄Sassは今回使うつもりなかったから確実に入れすぎ。。。npm install -Dだとローカルらしい。

gulpfile.jsを作成

実行

gulp // ver3まで
npx gulp // ver4以降

🙄ところがエラー。gulpfileの書き方が良くわからないのが起因ですね。。。ただブラウザーが自動起動したのは驚き。これがタスクランナーか！！

コメントを残す

RECOMMENDこちらの記事も人気です。