webstorm 编写pug与pug的编译配置

一 环境说明

系统：window 10

webstorm：2017.03

二、webstorm编写配置

点击：webstorm左上角的file

file->settings->Plugins

在搜索框中搜索pug,，点击下面的install进行安装。这样pug插件就安装好了。这样，在新建文件的时候就会出现pug的选项。

三、编译pug

首先需要确定电脑已经安装node和npm。具体可以参考我的另外一篇博客;http://blog.****.net/u014182411/article/details/78562722

然后使用npm安装pug和pug-cli，记住一定要是全局安装

npm install pug pug-cli -g

然后，进入到pug所在文件的目录下，执行

pug -P -w demo1.pug    (demo1.pug是你自己的pug的文件名)

-P是为了优化输出的html文件的格式，

-w是为了实时监听pug的变化将pug的变化实时反应到输出的html上

出现下图所示：

这样稍等片刻，就会在demo1.pug的下方出现一个demo1.html。

为了更好的编辑pug时，查看html的变化，我们可以设置webstorm分栏。右键点击demo1.pug编写框，出现如下图：

选着Split Vertically或者Split Horizontally，就可以在两个边栏同时查看demo1.pug和demo1.html。