常連

### 前提・実現したいこと

下記metaタグを変数で定義して使いまわしたいと思っています。
[参考記事](https://gist.github.com/japboy/5402844)をもとに試作中なのですが、エラーがあるようでmetaタグがpugからhtmlに生成されません。
今の現状だと、多分エラーは「metaで使おうとしているやつ定義されてないよ（main.jsに定義して）」だと思うのですが、今思いつく読み込み方は一通り試したつもりなので、どこで定義して（また定義ファイルを分ける場合はどこに変数ファイルをおいて読み込めばいいのか）について知りたいです。

どうぞご教授よろしくお願いいたします。





### 発生している問題・エラーメッセージ

```

[11:29:31] Using gulpfile ~\Desktop\ntyuex - バックアップ\gulpfile.js
[11:29:31] Starting 'default'...
[11:29:37] Starting 'compilePug'...
[11:29:37] 'compilePug' errored after 133 ms
[11:29:37] TypeError in plugin "gulp-pug"
Message:
    C:\Users(ファイル)\src\index.pug:15
    13|     link(rel='stylesheet', href="css/sp.css")
    14|     link(rel='preconnect' href='https://fonts.gstatic.com')
  > 15|     title= package.title
    16|     meta(name='description', content=package.description)
    17|     meta(name='keywords', keywords=package.keywords)
    18|     meta(name='robots', keywords=package.robots)

Cannot read property 'title' of undefined
Details:
    path: C:\Users(ファイル)\src\index.pug
    domainEmitter: [object Object]
    domainThrown: false

```
※上記(ファイル)は伏せるために表記を置き換えてあります。

### 該当のソースコード

```pug
<!DOCTYPE html>
html
 body
  head 
    link(rel='stylesheet', href="../src/css/reset.css")
    link(rel='stylesheet', href="css/style.css")
    link(rel="stylesheet",href="css/headerall.css")
    link(rel='stylesheet', href="css/tab.css")
    link(rel='stylesheet', href="css/sp.css")
    link(rel='preconnect' href='https://fonts.gstatic.com')
    title= package.title
    meta(name='description', content=package.description)
    meta(name='keywords', keywords=package.keywords)
    meta(name='robots', keywords=package.robots)

（中略）

include include/_footer
  script(src="../src/main.js")
```

### 該当のソースコード

```js?
var package = {
  title: '最高にクールなホームページ',
  description: '最高にクールなホームページです。見ないと損です。',
  keywords: [
    '最高',
    'クール',
    '世界一',
    '天才'
  ],
  robots: [
    'INDEX',
    'FOLLOW',
    'NOODP',
    'NOYDIR',
    'NOARCHIVE'
  ]
};
```


### 試したこと

■main.jsファイルを作成して、その中に定義してpugにはscriptタグで読み込む
→変わらずだめっぽい

■pugのhtmlよりも上の方に定義する
→エラーの意味はよく分からないけど、定義の一行目から「ここがだめ」って指摘されているようなので、多分pugに書いちゃダメなのかと思っています。

### 補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム


###ご回答の提案策を受けて修正
定義したファイル「setting.pug」はindex.pugと同じ階層。
【エラーメッセージ】
```エラーメッセージ



[13:03:42] Starting 'compilePug'...
[13:03:42] 'compilePug' errored after 23 ms
[13:03:42] Error in plugin "gulp-pug"
Message:
    C:\Users(ファイル)\src\setting.pug:6:12
    4|
    5| - var package = {
  > 6|     title: '最高にクールなホームページ',
------------------^
    7|     description: '最高にクールなホームページです。見ないと損です。',
    8|     keywords: [
    9|       '最高',

unexpected text "'最高にク"
Details:
    code: PUG:UNEXPECTED_TEXT
    msg: unexpected text "'最高にク"
    line: 6
    column: 12
    filename: C:\Users(ファイル)\src\setting.pug
    src:



- var package = {
    title: '最高にクールなホームページ',
    description: '最高にクールなホームページです。見ないと損です。',
    keywords: [
      '最高',
      'クール',
      '世界一',
      '天才'
    ],
    robots: [
      'INDEX',
      'FOLLOW',
      'NOODP',
      'NOYDIR',
      'NOARCHIVE'
    ]
  };
    toJSON: function () {
    return {
      code: this.code,
      msg: this.msg,
      line: this.line,
      column: this.column,
      filename: this.filename
    };
  }
    domainEmitter: [object Object]
    domainThrown: false



```
【index.pug】
```index.pug
include setting

<!DOCTYPE html>
html
 body
  
  head 
    link(rel='stylesheet', href="../src/css/reset.css")
    link(rel='stylesheet', href="css/style.css")
    link(rel="stylesheet",href="css/headerall.css")
    link(rel='stylesheet', href="css/tab.css")
    link(rel='stylesheet', href="css/sp.css")
    link(rel='preconnect' href='https://fonts.gstatic.com')
    title=package.title 
    meta(name='description', content=package.description)
    meta(name='keywords', keywords=package.keywords)
    meta(name='robots', keywords=package.robots)
    

```

【setting.pug】
```setting.pug




- var package = {
    title: '最高にクールなホームページ',
    description: '最高にクールなホームページです。見ないと損です。',
    keywords: [
      '最高',
      'クール',
      '世界一',
      '天才'
    ],
    robots: [
      'INDEX',
      'FOLLOW',
      'NOODP',
      'NOYDIR',
      'NOARCHIVE'
    ]
  };
```

Pugでコンポーネント化する際に、変数の定義をどこでするのか（どこに変数ファイルを置くのか）について

videoタグでmp4の動画を埋め込んでいるのですが、pcのsafari,chrome,Firefox、Androidのchrome,Firefoxでは問題なく再生されます。しかしiosのsafari,chrome,Firefoxで検証すると、動画が再生されません。

また、safariの検証画面 > ネットワークを見ると、動画を読み込んでいる最中に`リソース読み込み中にエラーが起きました。`と表示されます。動画は6.5mbと重いのですがこちらが関係しているのでしょうか。

```ここに言語を入力
ソースコード

[pug]
--------------------------------------------------------------------------------
video(poster=`${path}images/test.png` autoplay loop muted playsinline)
  source(src=`${path}images/test.mp4` type="video/mp4")
--------------------------------------------------------------------------------

[css]
--------------------------------------------------------------------------------
video{
 min-height: 100vh;
 width: 100%;
 object-fit: cover;
}
--------------------------------------------------------------------------------
```

ナレッジのある方がいらっしゃいましたら、ご教授お願いいたします。

iosの各ブラウザでhtml埋め込みの動画が再生されない。

### 前提・実現したいこと
Vue.jsで、エラー時にテキストボックスの枠線の色を変えたいのですが、思うように実装できません。
枠線の色を変えるにはどのように記述すればいいでしょうか。

以下形式で記述。
Vue.js
pug

### 試したこと

こうすると、テキストボックス自体が表示されなくなり、
```pug
input.form-control#name(type="text", name="name", v-model="name").alert(v-bind:class="{'alert-color': !isSuccess}" v-if="isErr")
```
下記のようにもやってみましたが、変化がなく、思うように実装できずにいます。

```pug
input.form-control#name(type="text", name="name", v-model="name", v-bind:class="{ 'alert-color': !isSuccess }")
```

Vue.jsで、エラー時にテキストボックスの枠線の色を変える

##実現したいこと

webpackでの制作環境を作っていまして、**pug.scss.js*は問題なく動作するのですが
　imgフォルダの画像がどうしてもページに表示されません。どうしてでしょうか？

### 構造

```tree
├── dist
│   ├── bundle.js
│   ├── index.html
│   └── src
│       └── assets
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   ├── img
|   |   |     ├── image.png
│   │   └── scss
│   ├── index.js
│   ├── index.pug
│   └── pug
│       ├── _footer.pug
│       ├── _header.pug
│       ├── _template.pug
└── webpack.config.js
```

```indexpug
extends ./pug/_template.pug

block append var
block main
  p.
    test
  img.test(src="./assets/img/image.png" alt="hoge")
  img(src=`${assets_dir}img/image.png` alt="hoge")

```
```webpackconfig
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = ( env, argv ) => ({
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 最適化オプションを上書き
  optimization: {
    minimizer: [
      new TerserPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },

  devtool: 'inline-source-map',

  //サーバーの設定 npm run start:dev
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    // watchContentBase: true,
    compress: true,
    port: 8000,
    open: true,
  },

  module: {
    rules: [
      // pug-loaderの設定
      {
        test: /.pug$/,
        use: ['pug-loader']
      },

      // babel-loaderの設定
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ],
        exclude: /node_modules/,
      },

      // css/sass-loaderの設定
      {
        test: /.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          'sass-loader'
        ]
      },

      // imgの設定
      {
        test: /.(png|svg|jpg|gif)/,
        use: [
          'file-loader',
        ]
      },
    ]
  },

  plugins: [
    new CleanWebpackPlugin(
      ['dist'],
      {
        // 除外するファイルやディレクトリを指定
        exclude: ['img']
      }
    ),
    new MiniCssExtractPlugin({
      filename: './src/assets/style.css'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.pug'
    })
  ]
});

```
```packkagejson
{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack --mode=production",
    "build:dev": "webpack --mode=development --watch",
    "start:dev": "webpack-dev-server --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.4.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.8.0"
  }
}

```

### 試したこと
画像以外の参考差分はその都度変更がかかるのですが、画像フォルダのみ色々試したのですが
表示されずにbuild後もdistフォルダにも生成されずに迷っております。

フロントエンドのwebpack環境構築【画像が表示されない】

### 前提・実現したいこと

mysqlに格納してあるデータをNode.jsとexpressを使ってpugに渡して表示させたい。

### 発生している問題・エラーメッセージ

```
TypeError: C:sensor_management\admin\views\device_list.pug:19
    17|                     td Edit or DEL

    18| 

  > 19|                 each facility in d

    20|                     tr

    21|                     td.id #{facility.id}

    22|                     td.id #{facility.set_name}


Cannot read property 'length' of undefined
    at eval (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:67:32)
    at eval (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:190:4)
    at template (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:197:7)
    at Object.exports.renderFile (C:\node_modules\pug\lib\index.js:452:38)
    at Object.exports.renderFile (C:\node_modules\pug\lib\index.js:442:21)
    at View.exports.__express [as engine] (C:\node_modules\pug\lib\index.js:491:11)
    at View.render (C:\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (C:\node_modules\express\lib\response.js:1012:7)
```

### 該当のソースコード

```pug
html
    head
        title #{title}
        link(rel="stylesheet" href="/css/style.css")
    body
        h1 Device List
            table.facility_table
                tr.title
                    td Device ID
                    td Set Place Name
                    td Set Place Address
                    td Place Manager Name
                    td Place Manager Address
                    td Manager's Tell Number
                    td Manager's Mail Address
                    td Place Longitude Latitude
                    td Edit or DEL

                each facility in d
                    tr
                    td.id #{facility.id}
                    td.id #{facility.set_name}
                    td.id #{facility.set_address}
                    td.id #{facility.manager_name}
                    td.id #{facility.manager_address}
                    td.id #{facility.tel}
                    td.id #{facility.mail}
                    td.id #{facility.e_n}
                    td.id 
                        - var id = facility.id 
                        form(action="/device_edit" method="get")
                            input(type="hidden" name="id" value=`${id}`)
                            button(type="submit").btn.edit Edit
                        form(action="/del" method="post")
                            input(type="hidden" name="id" value=`${id}`)
                            button(type="submit").btn.del DEL

            a(href="/admin_menu") トップ
```

```app.js
const express = require('express');
const url = require('url');
const app = express();// おまじない(expressを呼びやすくしてるだけ)
const bodyParser = require('body-parser');// HTMLのinputの値を引っ張れるようにするやつ
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// mySQLの認証情報
// ここには正しい値が入っています
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'table'
});

// テンプレートエンジンの定義
app.set('view engine', 'pug');
app.use(express.static('views'));

// モジュール化されたルーティング設定の呼び出し
const index = require('./routes/admin_server');

// インデックスページのルーティング
app.use('/', index);
app.use('/admin_login', index);
app.use('/admin_menu', index);
app.use('/device_list', index);
app.use('/patient_list', index);
app.use('/device_register', index);
app.use('/patient_register', index);

// テンプレートエンジンの定義
app.set('view engine', 'pug');
app.use(express.static('views'));

app.get('/device_list', isAuthenticated, function (req, res) {
    var sql = 'select * from facility.devices';
    fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl;
    connection.query(sql, (err, rows, fields) => {
        if (err) throw err;
        res.render('/device_list', {
            title: 'Devices List',
            d: rows
        });
    });
});

app.listen(port, () => {
    console.log('Start Admin Server 8080');
});

```

```./routes/admin_server.js
const express = require('express');
const router = express.Router();

// インデックスページのルーティング
router.get('/', (req, res) =>{
    res.render('admin_server');
});
router.get('/admin_login', (req, res) =>{
    res.render('admin_login');
});
router.get('/admin_menu', (req, res) => {
    res.render('admin_menu');
})
router.get('/device_list', (req, res) =>{
    res.render('device_list');
});
router.get('/patient_list', (req, res) => {
    res.render('patient_list');
})
router.get('/device_register', (req, res) => {
    res.render('device_register');
})
router.get('/patient_register', (req, res) => {
    res.render('patient_register');
})

module.exports = router;
```

### 試したこと

インデントの入れ替えや変数の書き換え、ルーティングのリンクの書き換えなども試しましたが効果なしでした。

res.render(/device_list)の直前でconsole.log(rows)を実行しましたが、そもそもここに至らず、同じエラーが吐かれてしまいました

当該のeach文のところをコメントアウトし実行したところ、ページが正しく遷移しました
```pug
html
    head
        title #{title}
        link(rel="stylesheet" href="/css/style.css")
    body
        h1 Device List
            table.facility_table
                tr.title
                    td Device ID
                    td Set Place Name
                    td Set Place Address
                    td Place Manager Name
                    td Place Manager Address
                    td Manager's Tell Number
                    td Manager's Mail Address
                    td Place Longitude Latitude
                    td Edit or DEL
                
                //- each device in d
                //-     tr
                //-     td.id #{device.id}
                //-     td.id #{device.set_name}
                //-     td.id #{device.set_address}
                //-     td.id #{device.manager_name}
                //-     td.id #{device.manager_address}
                //-     td.id #{device.tel}
                //-     td.id #{device.mail}
                //-     td.id #{device.e_n}
                //-     td.id 
                //-         - var id = device.id 
                //-         form(action="/device_edit" method="get")
                //-             input(type="hidden" name="id" value=`${id}`)
                //-             button(type="submit").btn.edit Edit
                //-         form(action="/del" method="post")
                //-             input(type="hidden" name="id" value=`${id}`)
                //-             button(type="submit").btn.del DEL

    a(href="/admin_menu") トップ
```
![イメージ説明](3807d5064bdb5a932ae6dca3da787d81.png)

### 補足情報（FW/ツールのバージョンなど）

[参考](https://qiita.com/KONTA2019/items/768348ee0ac5462648bd)を見ましたが、railsではないのであまりわかりませんでした。

Node.jsとexpressとpugでDBの中のデータを表に出力したいが、Cannot read property 'length' of undefinedとなる理由がわからない

gulpを使い、PugをHTMLにコンパイルする時に、改行とインデントを入れたいです。

いまの状態
![イメージ説明](8b1043fc1fb82d155fa77ddb0d66f195.png)
実現したいこと
![イメージ説明](69ad6310990665639c9ad7503d0e38e0.png)

pug({pretty: true})
という記述を入れれば実現できると思いましたが、できませんでした。

わかる方いらっしゃいましたら教えてほしいです。
よろしくお願いします。


------------------------------------------------
※以下、gulpfile.jsの中身です。

```ここに言語を入力
var gulp = require('gulp'); //require('プラグイン名')→使用するプラグインを読み込む
var sass = require('gulp-sass'); //Sassコンパイル
var plumber = require('gulp-plumber'); //エラー時の強制終了を防止
var notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する
var sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする
var browserSync = require( 'browser-sync' ); //ブラウザ反映
var postcss = require('gulp-postcss'); //autoprefixerとセット
var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
var cssdeclsort = require('css-declaration-sorter'); //css並べ替え
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var mozjpeg = require('imagemin-mozjpeg');
// var ejs = require("gulp-ejs");
var pug = require('gulp-pug');
var data = require('gulp-data');
var rename = require("gulp-rename"); //.ejsの拡張子を変更
var fs = require('fs');

// scssのコンパイル
gulp.task('sass', function() {
return gulp
.src( './src/scss/**/*.scss' )
.pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック
.pipe( sassGlob() )//importの読み込みを簡潔にする
.pipe( sass({
outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
}) )
.pipe( postcss([ autoprefixer(
{
// ☆IEは11以上、Androidは4.4以上
// その他は最新2バージョンで必要なベンダープレフィックスを付与する
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false}
) ]) )
.pipe( postcss([ cssdeclsort({ order: 'smacss' }) ]) )//プロパティをソートし直す(アルファベット順)
.pipe(gulp.dest('./public/css'));//コンパイル後の出力先
});

// 保存時のリロード
gulp.task( 'browser-sync', function(done) {
browserSync.init({

//ローカル開発
server: {
baseDir: "./",
index: "index.html"
}
});
done();
});

gulp.task( 'bs-reload', function(done) {
browserSync.reload();
done();
});

// gulp.task("ejs", (done) => {
// gulp
// .src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"])
// .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック
// .pipe(rename({extname: ".html"})) //拡張子をhtmlに
// .pipe(gulp.dest("./")); //出力先
// done();
// });
gulp.task("pug", () => {
  const pugData = function(){
    return JSON.parse(fs.readFileSync("./src/pug/data.json", "utf8"));
  }
  return gulp.src("./src/pug/**/*.pug")
  .pipe(data(pugData))
  .pipe(pug())
  .pipe(pug({pretty: true}))
  .pipe(gulp.dest("./public/html"));
});

// 監視
gulp.task( 'watch', function(done) {
  gulp.watch( './src/scss/**/*.scss', gulp.task('sass') ); //sassが更新されたらgulp sassを実行
  gulp.watch('./src/scss/**/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行
  gulp.watch( './src/js/*.js', gulp.task('bs-reload') ); //jsが更新されたらbs-relaodを実行
  gulp.watch('./src/pug/**/*.pug',gulp.task('pug') ) ; //ejsが更新されたらgulp-ejsを実行
  gulp.watch('./src/pug/**/*.pug',gulp.task('bs-reload') ) ; //ejsが更新されたらbs-reloadを実行
});

// default
gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));

//圧縮率の定義
var imageminOption = [
pngquant({ quality: [70-85], }),
mozjpeg({ quality: 85 }),
imagemin.gifsicle({
interlaced: false,
optimizationLevel: 1,
colors: 256
}),
// imagemin.jpegtran(),
imagemin.optipng(),
imagemin.svgo()
];
// 画像の圧縮
// $ gulp imageminで./src/img/base/フォルダ内の画像を圧縮し./src/img/フォルダへ
// .gifが入っているとエラーが出る
gulp.task('imagemin', function () {
return gulp
.src('./src/img/base/*.{png,jpg,gif,svg}')
.pipe(imagemin(imageminOption))
.pipe(gulp.dest('./public/img'));
});
```

Pugから生成したHTMLが1行になってしまう

### 前提・実現したいこと

コマンドプロンプトにエラーが出ていて、どうやらコンパイルができずに止まっているようです。
ネットで同様の記事等も見てみましたが、それでもどうしたらよいのか分かりません。
原因として思い当たる節とすれば、コンポーネント化を取り入れたくてReactを入れたりしたのでその時にいままでとディレクトリが変わってしまったりして、以前のディレクトリの指定では「そこにgulpはない」ってことになっているのかなと考えています。
ちなみに以前まではコンパイルできていたので、必要なインストールなどができていないなどの可能性は極めて低いかと考えております。

どうかご教授よろしくお願いいたします。



### 発生している問題・エラーメッセージ

```
[14:44:23] Using gulpfile ~\（ファイル名）\gulpfile.js
[14:44:23] Starting 'default'...
[14:46:49] Starting 'compilePug'...
[14:46:49] 'compilePug' errored after 94 ms
[14:46:49] SyntaxError in plugin "gulp-pug"
Message:
    Unexpected token (43:16)
Details:
    pos: 1256
    loc: [object Object]
    raisedAt: 1257
    domainEmitter: [object Object]
    domainThrown: false
```

### 試したこと
[過去の似た質問の閲覧](https://teratail.com/questions/276797)

[過去の似た質問の閲覧](https://teratail.com/questions/137351)


### 補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VScode
使用ツール:sass/pug/react(入れただけで使い方分かっていないので今回は使わないことにしました)
ブラウザ:クローム

gulpを用いたpug＆sassコンパイルのエラー： SyntaxError in plugin "gulp-pug"

まず、技術的な質問ではなくすみません。

掲題のとおりになりますが、

HTML書くためのテンプレートエンジンの『Pug（パグ）』ですが、

今後必須スキルになりますでしょうか？

エンジニア以外の方（営業、デザイナー）に
「『Pug（パグ）』はヤバイよ。」（ヤバイ＝良いという意味）
「エンジニアなら毛嫌いせずやっておくべきだよ、世の中の便利さから遅れるよ。」
と言われました。

私の状況としましては、サーバーサイドのみが担当になっているため、
HTMLはここ4年くらい書いていません。
でもまだHTMLは直に書けるスキルはあります。
しかし、ここ数年のHTMLやCSSの進化はわからず、今でもHTMLは直に書いた方が早いと思っている派です。

HTMLにお詳しい方、『Pug（パグ）』を積極的に導入されている方の意見をお聞きしたいです。