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

webstorm自带less,不过要编译的话需要nodejs环境。

  1. 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/
  2. 安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本号说明你安装成功了。
  3. 接下来就可以安装less了,命令提示符npm进入npm管理器,然后npm install less开始下载less,默认安装目录在用户名\node_modules这里面。
  4. 到这里less安装完毕了,接下来配置webstorm。
  5. 打开webstorm的file->settings ->External Tools,点击左上角的“加号”标志add,进入对话框

  6. program里设置的是lessc的路径,这里的目录可以参考截图中红框中的目录,他会默认编译到根目录。例如:/Users/xx/node_modules/less/bin/lessc
  7. 如果你想顺便压缩编译后的css,除了在Arguments中写入--plugin=less-plugin-clean-css外还要安装压缩插件:sudo 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/中搞定
  8. 然后你可以为这个编译器指定一个快捷键,我使用的是ALT + B
  9. 之后打开一个.less后缀名的文件,快捷键编译,如果webstorm底部状态控制器显示 Process finished with exit code 0 ,那么恭喜你,大功告成!
发布了63 篇原创文章 · 获赞 16 · 访问量 37万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章