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

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

安装和配置

首先当然是安装node.js;

通过npm全局安装Autoprefixer – cnpm install autoprefixer -g

通过npm全局安装postcss-cli – npm install postcss-cli -g 其中autoprefixer是postcss的插件

配置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的输入输出也可能不同，具体视情况而定。如下图所示：