HBuilder使用技巧配置Autoprefixer的自动添加css前缀

今天介绍下Hbuilder中的常用的技巧。

Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见，https://github.com/postcss/autoprefixer。

关于Autoprefixer

当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差异。这种方式，CSS是基于最新W3C规范产生：

编译成：

Autoprefixer 同样会清理过期的前缀，因此下面的代码：

编译成：

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

安装node.js

（略）

安装Autoprefixer，

见https://github.com/postcss/autoprefixer：

npm install autoprefixer -g

mac下可能需要加sudo，或者是不是全局安装（-g）那就看你自己的环境了。

如npm太慢，可使用 NPM 镜像的https://npm.taobao.org/

安装postcss-cli

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

npm install postcss-cli -g

配置外部工具

打开HBuilder，运行-外部工具-外部工具配置，如图：

新建一个外部工具配置

名称填写autoprefixer（这个随意，就是起个名字）

要执行的命令或文件填写npm安装目录\postcss.cmd（mac下应为npm安装目录\postcss)如

工作目录填写$

参数填写-u autoprefixer -o $ $

然后点击应用，如下图

使用autoprefixer

点击你的css、sass文件，然后右键，依次点击外部工具-autoprefixer（此处为你新建外部工具的名称）等待编译，编译完毕即可

配置快捷键

工具-选项-常规-快捷键，搜索autoprefixer（此处为你新建外部工具的名称），设置快捷键即可

在Hbuilder中运行效果图：

运行autoprefixer之后的效果：

如果有需要的话，可以根据这个步骤安装下，在写代码的时候方便很多。