zoukankan      html  css  js  c++  java
  • 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

    1.操作前确定成功安装less,检测方法,在命令行(cmd),输入lessc -v,看到如下类似内容,则说明安装过了。 
    这里写图片描述 
    如果需要生成压缩后的css的文件,则需要通过以下命令安装插件

    npm install less-plugin-clean-css

    【注:】可能遇到的问题

    解决方案:在E:Program Files odejs ode_modules pm进行安装

    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值是自动获取的,每个人电脑环境不同,路径类似)。按照下面的表中值进行配置,完成相应的功能。 
    修改前

    参数名参数值(下面no之前是两个“-”)
    Arguments –no-color $FileName$
    Output paths to refresh $FileNameWithoutExtension$.css

    修改后(不启用css压缩)

    参数名参数值(下面no和source之前是两个“-”)
    Arguments –no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map
    Output paths to refresh 留空

    修改后(启用css压缩,需要给less安装插件less-plugin-clean-css,详见《安装Nodejs、npm、Less(支持生成压缩后的css)》

    参数名参数值(下面no、clean和source之前是两个“-”)
    Arguments –no-color $FileName$ $FileNameWithoutExtension$.min.css –clean-css –source-map=$FileNameWithoutExtension$.min.css.map
    Output paths to refresh 留空

    修改后点击【确定】保存,回到less文件编辑界面,随意输入css代码,立即会生成css和map文件。 
    这里写图片描述 
    Arguments里还可添加其他参数实现更多的功能,点击后面的【Insert maro…】可以添加更多的宏值

  • 相关阅读:
    安装xcache3.0.3/3.2,为php加速
    编译安装lamp环境
    使用rpm包安装lamp环境
    centos6下通用二进制安装mysql5.5.33
    centos中进程管理工具
    centos6下的lvm逻辑卷的管理
    centos6中创建软raid方法
    解决vmware虚拟机克隆后启动centos报错device eth0 does not seem to be present, delaying initialization
    centos下常用文件管理命令
    centos下httpd-2.4的编译安装
  • 原文地址:https://www.cnblogs.com/liaojie970/p/7155374.html
Copyright © 2011-2022 走看看