在WebStorm里配置watcher实现编辑less文件时自动生成.css文件

1.安装 nodejs    

//查看nodejs版本  node -v

//查看npm版本  npm -v

//全局安装less  npm install -g less

2.配置webStrom

添加external Tools

parameters是默认地址的话  直接点insert就行

(Progrem 自己的安装位置   F:\NODE\node.exe)

(parameters:C:\Users\Administrator\AppData\Roaming\npm)

添加watcher

新建一个less文件,就会自动生成.css,实时编译,如图:

node.js编译less文件

可以用nodejs直接编译less文件,但是不能时时编译。

如:

lessc 需要编译的less名和路径 > 生成的css名和路径

原文地址:https://www.cnblogs.com/leeSmile/p/8483603.html

时间: 2024-08-11 07:42:22

在WebStorm里配置watcher实现编辑less文件时自动生成.css文件的相关文章

webstorm创建js文件时自动生成js注释

设置webstorm创建js文件时自动生成js注释 settings--Editor--File and Code Temlates 黑色框框里的内容自己填写上去,以下是参考的代码块: /** * @author ${USER} * @date ${DATE} ${TIME} */ 或者 /** * @author 张三 * @date ${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE} */ 变量解释: ${USER}:当前系统登录的用户名 ${DATE}:当前

Sublime text 3如何编辑less并转(编译)成css文件

今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个软件还能扩展sublime的功能,何乐而不为,于是赶紧去网上查了资料并加以整理. 1.在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为: Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中inst

Flask log配置,实现按照日期自动生成日志文件

Flask自带了logger模块,用来方便程序员群众记录日志,这里粘贴出来的是一段代码,用来初始化日志各项配置参数,并根据日期自动生成日志文件. #log配置,实现日志自动按日期生成日志文件def make_dir(make_dir_path): path = make_dir_path.strip() if not os.path.exists(path): os.makedirs(path) return pathlog_dir_name = "logs"log_file_name

配置使用vim编辑Nginx配置文件时语法高亮

vim是Unix系统中非常实用的文本编辑器,它和传统的vi相比最大的区别在于它所支持的配色方案,这个功能使得平时编辑一些配置文件或者是在写代码的时候极大的提高工作效率,如果我们在系统中有安装vim相应的包且开启了syntax配色方案的时候会不显示语法高亮往往是配置设置错误所引起的.一般配置错误有2个地方:1.是远程服务器的仿真客户终端配置错误:2.是服务器上环境变量配置错误.在这里就用SecureCRT仿真客户终端为例子简单的说一下vim开启syntax配色方案: 在SecureCRT上需要配置

关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直

设置XML文件的自动格式化配置

设置XML文件的自动格式化配置: 在Eclipse下编辑XML文件时可以像Java文件一样进行格式化.不过,默认的格式化设置效果不太理想,尤其是标签属性较多时.通过以下设置可以达到一个相对理想的效果:Window -> Preferences -> XML ->XML Files -> Editor : 1.1设置每行宽度Line width   设定为80到100个字符. 1.2标签的每个属性都单独一行显示:选中Split multiple attributes each on 

webpack配置:css文件打包和JS压缩打包

一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要引入到入口文件,这里我们引入到index.js中 import css from './css/index.css'; document.write("It works."); 3.在终端安装style-loader和css-loader 4.安装好后,我们开始在webpack.confi

利用oxygen编辑并生成xml文件,并使用JAVA的JAXB技术完成xml的解析

首先下载oxygen软件(Oxygen XML Editor),目前使用的是试用版(可以安装好软件以后get trial licence,获得免费使用30天的权限,当然这里鼓励大家用正版软件!!!) 1 首先建立一个空白XML文件,直接点击下图所示即可: 2 可以使用xml文本编辑界面,或者使用xml树状图编辑界面 切换到xml树状图编辑界面的方法为: 即可调出当前xml文件所对应的xml树状图编辑界面 3 设计并编辑xml文件 根据自己的需要可以利用xml树状图操作界面来方便的设计自己的xml

Windows下Nginx配置SSL实现Https访问(包含证书生成)

Vincent.李 Windows下Nginx配置SSL实现Https访问(包含证书生成) Windows下Nginx配置SSL实现Https访问(包含证书生成) 首先要说明为什么要实现https? HTTP全名超文本传输协议,客户端据此获取服务器上的超文本内容.超文本内容则以HTML为主,客户端拿到HTML内容后可根据规范进行解析呈现.因此,HTTP主要负责的是"内容的请求和获取".问题就出在这部分.行监控.劫持.阻挡等行为很容易导致网站泄密,一些关键参数比如登录密码开发者会在客户端