Pug

支持扩展类型: jade, pug

使用 Pug 很容易，这里提供几个简单的例子作为一点参考。

例 1 - Just index.pug

假设如下文件结构：

  1. .
  2. ├── package.json
  3. └── src
  4.     └── index.pug

使用 Parcel 命令运行起来：parcel src/index.pug

例 2 - index.pug, index.js and style.css

假设如下文件结构：

  1. .
  2. ├── package.json
  3. └── src
  4.     ├── index.js
  5.     ├── index.pug
  6.     └── style.css

在 index.pug 内，像往常一样写入样式和 js。

  1. // index.pug
  3. doctype html
  4. html(lang="")
  5.   head
  6.     // ...
  7.     link(rel="stylesheet", href="index.css")
  8.   body
  9.     h1 Hello
  11.     script(src="index.js")

以同样的方式使用 Stylus, Sass or LESS，把样式导入到 js 文件内。

例 3 - Pug with locals

假设如下文件结构：

  1. .
  2. ├── package.json
  3. └── src
  4.     ├── index.pug
  5.     └── pug.config.js

我们需要从pug.config.js 文件导出 locals对象，pug.config.js文件必须放在 index.pug或者package.json文件所在目录。

  1. // pug.config.js
  3. module.exports = {
  4.   locals: {
  5.     hello: 'world'
  6.   }
  7. }
  1. // index.pug
  3. doctype html
  4. html(lang="")
  5.   head
  6.     // ...
  7.   body
  8.     h1 #{hello}

接着，使用命令运行起来：parcel src/index.pug

更新 locals 对象需要重新执行 parcel

如果更新了locals对象，请关闭 parcel 进程并重新执行 parcel src/index.pug。

注意无声的错误

当使用 locals 设置时，在 Pug 中使用一个不存在的插值（interpolation）将不会收到任何错误告警。

假设，我们写了h1 #{thing}并且在 locals 对象中不存在thing 属性，Parcel 不会暂停并报告任何错误。你只是在浏览器看到空的结果。因此，确保有一个正确的配置，否则插值（interpolation）不运行也不知道什么问题。

三种类型的配置文件

可以使用.pugrc 或 .pugrc.js来代替pug.config.js。但只有这三个文件可以设置 locals。

不能在 pug.config.js 文件中使用 import 语句

若要在pug.config.js中导入其他文件，请使用 require 语句。

  1. // pug.config.js
  3. const data = require('./data.js')
  5. module.exports = {
  6.   locals: {
  7.     d: data
  8.   }
  9. }

添加脚本到 package.json

  1. "scripts": {
  2.     "dev": "parcel src/index.pug",
  3.     "devopen": "parcel src/index.pug --open 'google chrome'",
  4.     "build": "parcel build src/index.pug"
  5.   },

使用npm run devopen自动打开浏览器，执行npm run build生产环境打包。

帮助我们改善文档

如果有遗漏或者不清楚的地方，请在本站的仓库 提交issue 或者 编辑此页面.