WebStorm添加jade(pug) watcher

最新推荐文章于 2022-09-15 10:06:34 发布
原创 最新推荐文章于 2022-09-15 10:06:34 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文介绍如何在WebStorm中设置FileWatcher以实现Pug到HTML的自动转换，便于实时预览和编辑。通过安装Pug及命令行工具并配置相关参数，可提升前端开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

WebStorm添加jade(pug) watcher

jade由于版权问题改名为了pug，但是基本内容没有改变。

pug主要用在Node中，但并不妨碍我们在其他场合使用它。自从接触pug以来，我就很少用原生html语言来编辑网页了，并不是说HTML不好而是jade以缩进来表示HTML中的嵌套关系，结构层次远比HTML要清晰，而且方便学习，使用简单。我在非Node项目中使用pug主要是为了方便查看，编辑后需要转换成HTML再使用。

pug的相关用法可以在http://jade-lang.com/学习。

为了方便的查看pug的转化效果，可以给webStorm设置一个FileWatcher，这样可以自动生成对应html文件。

下载pug

npm install pug

同时下载pug命令行工具

npm install pug-cli

设置watcher

在WebStorm下，File->settings

在左上角搜索watcher，选择Tools->fileWatcher

添加一个watcher，设置如下

这里写图片描述

Program下，选择node_modules/.bin/pug.cmd

Argumets 前一定要加上-P ,使HTML格式更加美观

webstorm 编写pug与pug的编译配置
远走的兔子博客
01-03 3885
一 环境说明 系统：window 10 webstorm：2017.03 二、webstorm编写配置 点击：webstorm左上角的file file->settings->Plugins 在搜索框中搜索pug,，点击下面的install进行安装。这样pug插件就安装好了。这样，在新建文件的时候就会出现pug的选项。 三、编译pug 首先需要确定电脑已经安
关于webstorm使用file watchers编译pug,scss,es6,json5后缀文件的配置命令
张杰伦的博客
07-09 518
pug 默认编译到当前文件夹 arguments: $FileName$ 指定文件夹：$FileName$ -o $ContentRoot$/.tmp/$FileRelativeDir$/ -E html $ContentRoot$是项目根目录，$FileRelativeDir$是编译文件的目录结构，-E指定后缀 scss 默认的argumes：$FileName$:$FileName...
webstorm 下载并设置jade、less
橙子wj的博客
10-20 2823
和Intellij出自同一个公司。jetbrains的产品总是备受期待。现在做的项目需要把之前的html等改为jade开发，这里记录一下开始的设置过程。如果之前已有项目，现在只是改为webstorm开发的话，想要导入项目不要选open，因为可能提示你找不到 iml 文件。一般项目的module的根目录才有iml，如果是module中的某个子文件夹用来存放jade、less等的话，无法直接用open打
WebStorm 5.0.4支持Jade模板
wuyuanjingni的专栏
01-28 1458
WebStorm 5.0引入初始Jade模板，包括： 根据选定的文档类型判断代码完成的HTML标签以及属性代码完成支持所有Jada模板引擎文件路径完成和验证有扩展和包含两种语句 WebStorm 5.0 在JavaScript开发上有几十个大大小小的改进，值得关注的有以下几点： JSTestDriver支持修复了许多bug，速度改进能调试JSTestDriver单元测试项目级JS
phpstorm在原有的jade项目上出现Invalid indentation, you can use tabs or spaces but not both
劲枫的博客
04-15 435
由于接受他人项目需要直接在原来的模板上新建东西 。 但是由于编辑器不同的原因，原有项目使用的tab，我这边之前tab是按照缩进四格做的。导致出错。 首先查看下自己的编辑器是否也是如此，如下 可以看到，我在“测试”那里使用的tab但是出现四格空格 修复，如下全部用tab缩进 ...
1.2 webstorm设置pug自动编译
LetsStudy的博客
06-18 746
一、File->Setting->Tools选择File Watchers
webpack使用
QMM的专栏
09-05 403
1. 创建自己的项目文件夹 2.  初始化npm      npm init      输入后，首先可以都使用默认值，一直enter，最后确定就可以，确定以后会在文件夹中生成一个package.ison文件 3. init之后需要安装webpack      npm install webpack --save-dev     安装成功之后会在文件夹下生成一个node_modules文
webstorm添加vue.js支持的方法教程
10-19
因为本人使用的是webstorm2016 2.3版本，结果竟然不支持vue文件，所以找到了一个解决方法，下面这篇文章主要给大家介绍了关于webstorm添加vue支持的方法教程，需要的朋友可以参考借鉴，下面来一起看看吧。
webstorm无法打开解决方案
ghost的博客
09-15 6892
通过安装根目录/bin/webstorm.bat运行查看错误原因（idea其实同理），该文件是启动文件，无法打开都可以在这里查看原因。个人怀疑有些不是内存原因的闪退也跟这里有问题有关。
在webstorm设置File watcher for Jade
weixin_33985507的博客
01-26 248
用Jade模板引擎写html确实方便，元素不用闭合，很多种简写的方法。 为了要知道自己写的对不对，就要用到jade -w命令监控jade文件，只要变化就编译。 现在用webstorm写代码的超多，可以通过其中的Filewatcher的方式关联jade命令做到自动化编译生成html文件。 步骤： 1.当然是安装jade，装过的就忽略。 npm install -g jade   ...
在webstorm中配置pug、scss的file watcher及编译路径
piglet1963的博客
05-25 2828
配置pug 下载pug及命令工具 npm install pug npm install pug-cli 配置file watcher program中填  [path]\node_modules\.bin\pug.cmd arguments中填 -P $FileName$ 如果想要配置编译文件路径，在arguments后填 -o [path
在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
热门推荐
lhtzbj12的专栏
02-05 2万+
前言WebStorm是一款非常优秀的Web前端IDE工具，本文主要介绍，如何在其Watcher中进行配置，实现编辑less文件时自动生成.map和压缩后的.css文件。笔者WebStorm版本为2016.1.1。开始动手1.操作前确定成功安装less，检测方法，在命令行（cmd）,输入lessc -v，看到如下类似内容，则说明安装过了。 如果需要生成压缩后的css的文件，则需要通过以下命令安装
HTML与PUG互相编译的方法
心有猛狗
12-26 8123
pug编译为HTML我们可以借助npm安装pug的cil来实现 具体方法我在一篇博文中已有具体描述 PUG的安装与编译 HTML转换为PUG我们可以借助一个在线的工具网站 http://html2jade.vida.io/ HTML与PUG在线转换工具 点击打开链接
基于WebStorm(二)-----webstorm项目中pug转化为html
编程小渣渣的进阶之路
10-08 2899
        总所周知,在开发过程中html界面最烦的就是'<>'与'<></>',有时候稍微不小心少打了个'>'项目就开始罢工,开始不跑;为了提高效率也为了减少不必要的错误影响开发心情,所以jade应运而生,jade在github上开源(https://github.com/pugjs/pug)受到了一众web开发者的喜爱,后来因为版权问题,j...
实验驱动开发与响应式编程 ---- File Watcher的技术实现----File Watcher，是由我开发的一个文件监控工具（见：File Watcher，不只是一个工具），关于它的具体需求以
bluelamb的专栏
11-13 459
在webstorm中使用Jade for Meteor，模板template语法“+templateName”不能使用的解决方案...
weixin_34245169的博客
03-05 174
用jade写meteor的模板比spacebar方便的多，找到了这款插件：https://github.com/mquandalle/meteor-jade 自然是开开心心的用了起来。可是每当引用了template的时候，用了这个插件自定义的语法：+templateName 在server上编译都会莫名其妙的让整个页面空掉... 百思不得...
NodeJS 、Express4.x、Jade使用方法
mergerly的专栏
07-21 5185
第一部分：安装node 、Express、Jade    1、下载nodejs,官方下载地址:http://nodejs.org/    2、安装过程，选择下一步直到安装完成。(node -v | npm-v //查看版本)    3、设置淘宝的registry npm config set registry https://registry.npm.taobao.org n
less的编译
weixin_34007879的博客
12-20 200
less其实也文本类型，跟txt的性质差不多 less有自己语法（变量，函数，作用域、Mixin混入），使css样式更加方便，有逻辑性，提高可维护性，减少重复性代码的冗余。 把less编译成css文件，编译方式有两种方式 第一种： 1.建立一个以“.less”为后缀的文件（例：demo.less），使用记事本打开，在里面写入@color:red; a{color:@color;} 2.编...
webstorm如何添加到右键菜单
最新发布
07-04
可以通过修改注册表将 WebStorm 添加到文件或文件夹的右键上下文菜单中，以便快速使用 WebStorm 打开目标文件夹。 ### 添加 WebStorm 到右键菜单的方法 #### 步骤 1：打开注册表编辑器 在 Windows 操作系统中，按...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值