WebStorm配置Pug模板引擎自动编译为HTML步骤-webstorm-PHP中文网

webstorm中配置file watcher自动将pug转html需安装pug-cli、正确设置program路径、arguments（含--pretty和--out）、output paths，并勾选自动保存与外部变更触发；常见问题包括命令找不到、路径含空格、include路径错误及watcher未启用。

webstorm配置pug模板引擎自动编译为html步骤

WebStorm里怎么配File Watcher自动转Pug为HTML

直接配 File Watcher 是最轻量、最贴近编辑即见效果的方式，不用动 Webpack 配置，适合只写模板、不跑构建流程的场景。

关键点是：必须用 pug-cli，不能只装 pug；Watch 程序路径要填对；输出路径别和源目录混在一起，否则可能触发循环监听。

先全局安装：npm install pug-cli -g（验证：终端执行 pug --help 有输出）
在 WebStorm 中打开 Settings → Tools → File Watchers，点击 + → Pug
确认 Program 字段指向 pug 可执行文件（macOS/Linux 通常是 /usr/local/bin/pug，Windows 是 C:\Users\{user}\AppData\Roaming\npm\pug.cmd）
Arguments 填：--pretty --out $ProjectFileDir$/dist/html $FilePath$（--pretty 保证格式可读，--out 指定输出目录）
Output paths to refresh 填：$ProjectFileDir$/dist/html/$FileNameWithoutExtension$.html
勾选 Auto-save edited files to trigger the watcher 和 Trigger the watcher on external changes

为什么改了Pug文件没生成HTML？常见卡点

不是配置没生效，而是几个典型位置容易出错，尤其 Windows 用户和多项目共存环境。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

pug 命令找不到：WebStorm 的 File Watcher 默认走系统 PATH，但某些终端（如 PowerShell）装的全局命令，CMD 或 WebStorm 内置 Terminal 可能没继承到。解决办法：用绝对路径填 Program 字段
输出路径含空格或中文：比如 $ProjectFileDir$ 解析出来是 C:\my project\src，pug CLI 会报错。建议把项目路径改成纯英文、无空格
include 或 extends 路径错误：Pug 编译失败时不会弹窗，只在 WebStorm 底部 Event Log 里提示 Failed to compile Pug file，点开看具体哪行报 Cannot find module
watcher 被禁用：右下角状态栏有个小眼睛图标，点开确认对应 Pug watcher 是 enabled 状态

Webpack打包时Pug模板怎么注入变量

如果项目本身用 Webpack + html-webpack-plugin，那 File Watcher 就多余了——变量注入必须走 Webpack 配置，否则编译出的 HTML 里 #{title} 还是原样。

loader 用 pug-html-loader（不是 pug-loader），它支持 data 选项传入变量

在 webpack.config.js 里这样写：

module.exports = {
  module: {
    rules: [{
      test: /\.pug$/,
      use: [{
        loader: 'pug-html-loader',
        options: {
          data: {
            title: '后台管理系统',
            version: process.env.VERSION || '1.0.0'
          }
        }
      }]
    }]
  }
};

模板里直接写：title #{title} - v#{version}，编译后就是 <title>后台管理系统 - v1.0.0</title>
注意：pug-loader 不支持 data，它只返回函数，得配合 html-webpack-plugin 的 templateParameters 才能传参，容易绕晕