在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
来源:互联网 发布:淘宝买家仅退款不退货 编辑:程序博客网 时间:2024/05/19 14:19
前言
WebStorm是一款非常优秀的Web前端IDE工具,本文主要介绍,如何在其Watcher中进行配置,实现编辑less文件时自动生成.map和压缩后的.css文件。笔者WebStorm版本为2016.1.1。
开始动手
1.操作前确定成功安装less,检测方法,在命令行(cmd),输入lessc -v,看到如下类似内容,则说明安装过了。
如果需要生成压缩后的css的文件,则需要通过以下命令安装插件,详见《安装Nodejs、npm、Less(支持生成压缩后的css)》
npm install less-plugin-clean-css
2.打开WebStrom,随便新建一个工程,在工程名上右键,【新建】-【Stylesheet】,输入文件名,Kind值选择Less File,【确定】,会自动提示是否将less加入watcher,点击【Add watcher】,
打开New Watcher配置界面,如果没有提示,也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打开New Watcher配置界面。
3.此时,如果直接点击【确定】,则当我们修改less文件时,会自动生成相应的css文件,当然我们为了让其功能更强大,生成压缩后的css和相应的map文件,就需要修改Arguments和Output paths to refresh两个参数(注意Program值是自动获取的,每个人电脑环境不同,路径类似)。按照下面的表中值进行配置,完成相应的功能。
修改前
修改后(不启用css压缩)
修改后(启用css压缩,需要给less安装插件less-plugin-clean-css,详见《安装Nodejs、npm、Less(支持生成压缩后的css)》)
修改后点击【确定】保存,回到less文件编辑界面,随意输入css代码,立即会生成css和map文件。
Arguments里还可添加其他参数实现更多的功能,点击后面的【Insert maro…】可以添加更多的宏值。
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
- 在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- 结合YUI Compressor在WebStrom添加Watcher实现编辑js文件时自动压缩(包括自定义监听范围Scope)
- less压缩css文件
- less,webstorm 自动编译输出css配置
- PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件
- Ubuntu 下配置 PhpStorm 自动编译 LESS 生成css和source-map
- WebStorm使用之.JS文件自动压缩YUI Compressor配置
- 关于webStorm设置less自动编译css和sourcemap问题
- 在webstorm上利用babel实现自动编译es6文件
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录
- 安装Nodejs、npm、Less(支持生成压缩后的css)
- CSS文件和Javascript文件的压缩
- CSS文件和Javascript文件的压缩
- core文件生成时自动压缩
- Mac下为webstorm设置less的文件监视器
- 在webstorm中配置pug、scss的file watcher及编译路径
- 【NOIP2004】虫食算(搜索+高斯消元)
- iOS Objc Runtime 教程+实例Demo
- SVD分解理论
- revit二次开发——从族实例中取得几何信息
- 单例模式,你所应该知道的一切
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
- ℃江让您从精通到入门:第一次
- HDU1698 Just a Hook 线段树成段替换
- java设计模式之组合模式
- tcp为什么需要3次握手和3次握手的过程
- dfs走迷宫
- python优雅实现策略模式
- Sticks --dfs 剪枝
- java编程思想读书笔记--第四章 控制执行流程