webstorm和node配合使用的一些小技巧之External tools

webstorm和nodejs都是神器，只是我一直都没有发掘出来他们的厉害之处

要说webstrom和node的配合使用不得不说一下平时的工做流程这里以css为例

1. 根据页面划分功能模块

2. 根据模块写less或者修改less

3. 编译less为css

4. 压缩css并上传

都说前端是网页设计，其实写css也能够很“面向对象”或者说“面向结构”

• 从最先的web页面开始时，样式是写在HTML里面的，后来把css和js拿了出来(model,view,control。所谓的表现、样式、控制分离)。

• 再后来css修改维护时若是修改一些参数，或者css样式不少时，结构很混乱，维护很麻烦，因而有了less等一众CSS预处理语言(less的一个好处就是可让css的结构很清晰)。

• 再加上如今模块化那么流行，还要强调重用性，因此模块里面还要再去套用模块。

因而文件结构变成了下面这样

最外层是单个页面或主模块的less， 里面是某一个插件(swiper)的less或者某个动画(animate)效果的less

文件结构已经好了，而后呢？接下来就须要配合webstorm使用了

前提条件：安装nodejs,安装less,安装less-plugin-clean-css，安装webstorm

打开webstorm-->File-->Setting-->Tools-->External tools(能够直接搜索)

以下图：点击加号-->填入命令的名字，选择命令所属分组（能够输入建立，我这里的是css）,而后进行工具设定

我这里要设定的是一条less的编译并压缩的命令（相似下面这条）

lessc --plugin=less-plugin-clean-css a.less a.min.css

左下角方框第一行是命令文件地址

C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd 
（这是我电脑的地址，找不到文件能够在电脑上全局搜索lessc.md）

左下角方框第二行是执行的命令

--plugin=less-plugin-clean-css $ProjectFileDir$\$FileDirRelativeToProjectRoot$\$FileName$   $ProjectFileDir$\$FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.min.css

（中间那些$看不懂的点右下角方框对应的按钮，对着选项点几下你就明白是什么意思了,不懂英文也不要紧）
我这里命令的意思是直接压缩并编译less到对应的项目文件夹，后缀名是.min.css

左下角方框第三行是命令工做目录，通常选择第一个时会自动选中

$FileDir$

操做完毕后点击OK保存

而后去设置一下这个命令的快捷键个人为：ALT+X

接下来就能够在webstorm里面很方便的使用这条命令了

最后，若是只是这么一条命令也就算了，你有没有想过加入其它命令呢？

好比： 加入node,直接跑express服务器deng，

加入cmd，执行bat脚本提交git仓库，

或者一些其它工具等等，

是否是瞬间感受逼格满满，很期待呢？赶忙去尝试吧！