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
  2. doctype html
  3. html(lang="")
  4. head
  5. // ...
  6. link(rel="stylesheet", href="index.css")
  7. body
  8. h1 Hello
  9. 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
  2. module.exports = {
  3. locals: {
  4. hello: 'world'
  5. }
  6. }
  1. // index.pug
  2. doctype html
  3. html(lang="")
  4. head
  5. // ...
  6. body
  7. 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
  2. const data = require('./data.js')
  3. module.exports = {
  4. locals: {
  5. d: data
  6. }
  7. }

添加脚本到 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 或者 编辑此页面.