在Webstorm中使用Autoprefixer实现CSS自动补全

前段时间我写了一篇文章：WebStorm怎么设置实现自动编译less文件 利用lessc模块实现less文件自动编译城css文件。

但是有一个缺点，就是lessc编译后只能将less转换为css格式，并不能自动补全前缀。

我们可以用Autoprefixer模块来给css自动补全，实现多浏览器的兼容。

Autoprefixer使用起来很简单，它根据最新的W3C规范，自动补充CSS前缀并编写普通的CSS，生成旧浏览器的代码。

支持选择器（如:fullscreen和::selection），单元函数（calc()），at-rules（@supports和@keyframes）和属性。

编译前：

div {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译后：

div {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}

Autoprefixer还可以自动删除过时的、不必要的前缀代码。

编译前：

div {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译后：

div {
    border-radius : 5px
}

因为经过Autoprefixer处理，CSS将仅保留实际的浏览器前缀。

Autoprefixer的安装和配置：

1、首先当然是安装node.js

    参考我之前的那篇文章。

2、安装Autoprefixer

打开cmd控制台，输入下面一行npm命令，安装Autoprefixer模块：-g是全局安装，如果不加会安装在当前目录。

npm install autoprefixer -g

3、安装postcss-cli

Autoprefixer其实是postcss的插件，见：https://github.com/code42day/postcss-cli

npm install postcss-cli -g

4、配置External Tools

打开Webstorm设置，Preferences -> Tools -> External Tools，点击新增按钮，如图：

Name：autoprefixer 

Tool settings：

       Program： 找到AppData下的文件postcss.cm  若找不到AppData，在地址栏输入%appdata%回车，或者在用户名文件夹后输入AppData即可，如下图

       Parameters：-u autoprefixer -o outputFile inputFile  （-u 插件名称 -o 输出文件 输入文件，注意文件顺序输出文件及输入文件 ，输入文件需要先新建，不能自动生成）

       Working directory：文件目录即可，可根据自己需要调整

我的配置：如果您是Windows用户，可以直接复制，注意：Deshun换成您的用户名

       Program：C:\Users\Deshun\AppData\Roaming\npm\postcss.cmd

       Parameters：-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$

       Working directory：$ProjectFileDir$

5、在需要转换的文件点击右键->External Tools->autoprefixer ,即可生成新增兼容前缀的文件

由于Autoprefixer是CSS的后处理器，我们还可以将其与预处理器（如Sass，Stylus或LESS）一起使用。详情见：https://github.com/postcss/autoprefixer

注意：Autoprefixer不支持中文目录，并且路径中不能有空格，否则会报错：Input Error: You must pass a valid list of files to parse

未经允许不得转载：前端资源网 - w3h5 » 在Webstorm中使用Autoprefixer实现CSS自动补全