在Webstorm中Autoprefixer的环境配置

之前使用CSS3属性的时候都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀，之前都是使用mixins，现在发现使用autoprefixer这个插件就可以一键处理css3的不同平台的兼容性问题。参考借鉴一下了网上的文章，来整理一下在webstorm中配置一下autoprefixer。

关于Autoprefixer

Autoprefixer是一个后处理程序，不同于Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见，https://github.com/postcss/autoprefixer。当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差异。

具体安装和配置

1、首先当然是安装node.js
windows下安装nodejs：
（1）下载安装文件：https://nodejs.org/en/ （根据需求选择需要安装的版本）
（2）默认是安装在C:\Program Files\nodejs下面，（根据个人需要），最新版的nodejs已经集成了npm，所以不需要再安装npm包。
2、安装autoprefixer
在命令行中输入：npm install autoprefixer -g；使用npm管理工具全局（-g）安装autoprefixer。
3、安装postcss-cli（Autoprefixer其实是postcss的插件）
在命令行中输入：npm install postcss-cli -g；
4、配置External Tools
我的版本是9.0.3，可能不同版本的界面不一样；
在file—Settings—Tools–External Tools;点击新增按钮；
如下图：

Program:填入你的postcss-cli 的PATH；Parameters: `-u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ，你可以根据你自己的需要配置，具体参见https://github.com/code42day/postcss-cliWorking directory :$ProjectFileDir$

ps：windows下可以直接用autoprefixer的PATH，具体配置：
windows 找不到autoprefixer.cmd，webstrom无法用执行autoprefixer 这个问题，
可以如下配置

Program：C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmdParameters：-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$Working directory ：`$ProjectFileDir$`

5、设置快捷键
右键太麻烦的话，可以设置个快捷键，打开Webstorm设置，Preferences -> Keymap ， 搜索External Tools ， 配置 autoprefixer即可。 不要和原来的冲突就可以了。