在Webstorm编辑器中使用Autoprefixer处理CSS前缀

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

安装和配置

1. 首先当然是安装node.js;
2. 通过npm全局安装Autoprefixer – cnpm install autoprefixer -g
3. 通过npm全局安装postcss-cli – npm install postcss-cli -g 其中autoprefixer是postcss的插件

4. 配置Webstorm

   打开webstorm->File->设置->搜索External Tools->点击‘+’，设置Edit Tool

   Name：autoprefixer
   Program：postcss-cli的path
   Arguments:  -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$
   Working directory:$ProjectFileDir$

   postcss-cli的path在C:\Users\gt\AppData\Roaming\npm/postcss.cmd

   Parameters中的-u autoprefixer -o是固定的，$FileDir$\$FileName$是输出文件，$FileDir$\$FileName$是输入文件，这两者之间有一个空格。同时根据文件夹结构不同Arguments的输入输出也可能不同，具体视情况而定。如下图所示：