如何在window环境下执行jade编译成html文件

1首先要下载nodeJs，下载完成后安装，安装完毕打开终端，输入node –v，如果可以看到版本信息，表明安装成功了

2使用npm命令（npm install jade -g）安装JADE模块

3安装成功后打开WebStorm，点击菜单栏的file-settings，点击Tools，就会看到File Watchers选项项，点击File Watchers，会出现配置界面

4点击右侧的“+“号，在下拉列表中点击JADE

5里面的选项只需要配置两个即可，首先在Program选项中填入jadeNaNd的路径，因为JADE是安装在全局环境中的，所以jadeNaNd一般都在AppData\Roaming\npm 下，以我的电脑为例，完整路径是：C:\Users\Administrator\AppData\Roaming\npm\jade.cmd；然后再在Arguments中加上‘-P ’记得P要大写，P后面有个空格，完整内容如下：“-P $FileName$”

首先肯定会问什么是 pug ，如果是 nodejs 程序员的话，肯定听过 jade 吧， pug 就是 从 jade 改名过来的。

说白了，它就是可以让你以更好的语法来写 html 。

下面看看例子就会清楚的。

现在我们就要代替之前的 src/index.html 改用 pug 语法来写。

首先把 src/index.html 改名叫 src/index.pug

src/index.pug

上面的内容是从 pug 官方的示例中抄的，然后稍微改了一下。

webpack.config.js

这样基本没啥问题，来看下结果：

我们来试试 pug 的 include 功能，就是可以包含子模板。

src/index.pug

src/includes/header.pug

目录结构是这样的：

结果：

先这样吧。

---