webstorm下搭建编译less环境 以及设置压缩css

webstorm自带less，不过要编译的话须要nodejs环境。

1. 首先去node的主页下载对应版本的nodejs而后安装，下载地址：http://nodejs.org/
2. 安装完以后打开命令提示符（win+r）,分别输入node -v以及npm -v若是返回版本号说明你安装成功了。
3. 接下来就能够安装less了，命令提示符npm进入npm管理器，而后npm -g install less开始下载less，默认安装目录在用户名\node_modules这里面。复制红框中的路径

4.  

5. 到这里less安装完毕了，接下来配置webstorm。
6. 打开webstorm的file->settings ->External Tools，点击左上角的“加号”标志add，进入对话框

7.  

8. program里设置的是lessc的路径，这里的目录能够参考截图中红框中的目录，他会默认编译到根目录。例如：/Users/xx/node_modules/less/bin/lessc
9. 若是你想顺便压缩编译后的css，除了在Arguments中写入--plugin=less-plugin-clean-css外还要安装压缩插件：npm install -g less-plugin-clean-css，这里要注意我安装的路径，若是最后less-plugin-clean-css的路径和上边的/Users/xx/node_modules/less不一个路径的话也跑步起来，这样怎么解决呢，能够直接将clean-css路径中的less-plugin-clean-css文件夹copy到/Users/xx/node_modules/中搞定
10. 而后你能够为这个编译器指定一个快捷键，我使用的是ALT + B ，（注意：这一步能够省略，由于直接保存就编译了）
12. 以后打开一个.less后缀名的文件，快捷键编译，若是webstorm底部状态控制器显示 Process finished with exit code 0 ，那么恭喜你，大功告成！