https://github.com/simiraaaa/pug-builder

pug watch and build パグファイルを監視して自動でビルドする
https://github.com/simiraaaa/pug-builder

Last synced: about 1 month ago
JSON representation

pug watch and build パグファイルを監視して自動でビルドする

• Host: GitHub
• URL: https://github.com/simiraaaa/pug-builder
• Owner: simiraaaa
• License: mit
• Created: 2019-03-01T06:05:09.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T00:26:25.000Z (about 2 years ago)
• Last Synced: 2024-11-11T16:08:28.124Z (about 2 months ago)
• Language: JavaScript
• Size: 127 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pug-builder

pug to html

build and watch

1. npm を install

2. 作業したいディレクトリへ移動

3. `npm init -y` package.json 作成

4. 開発用に pug-builder をインストール `npm i -D pug-builder`

5. package.json の scripts に以下のコマンドを追加

```

  "scripts": {

    "build": "node ./dev/build.js",

    "watch": "node ./dev/watch.js"

  },

```

6. 作業ディレクトリ(以下 wd) に dev フォルダ作成

7. `wd/dev/build.js` と `wd/dev/watch.js` を作成

8. build.js の中身を以下のように書く(パスはすべてwdからの相対パス)

```

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

builder.build({

  // pug ファイルを編集するディレクトリ

  target: 'src',

  // pug のモジュール(mixin等)のpugファイルを編集するディレクトリ(なければ指定する必要はない)

  includes: 'includes',

  // htmlを出力するディレクトリ (srcからの相対パスで出力)

  output: 'dst',

  // 出力するhtmlを読みやすくするかどうか

  pretty: true,

});

```

9. watch.js も以下のようにします

```

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

builder.watch({

  // pug ファイルを編集するディレクトリ

  target: 'src',

  // pug のモジュール(mixin等)のpugファイルを編集するディレクトリ(なければ指定する必要はない)

  includes: 'includes',

  // htmlを出力するディレクトリ (srcからの相対パスで出力)

  output: 'dst',

  // 出力するhtmlを読みやすくするかどうか

  pretty: true,

});

```

10. wd で `npm run build` と実行すると target で指定したディレクトリ内の pug ファイルがすべて html に変換され output で指定したディレクトリに出力されます

11. `npm run watch` と実行すると target と includes で指定したディレクトリの編集を監視して自動でbuildを実行します。