Hbuilder和Emmet

首先，你看这篇文章的时候也许你就在使用Hbuilder，如果你是无意中看过来的，而正巧又在寻找一个有点吊的IDE（注：IDE，即Integrated Development Environment，是“集成开发环境”的英文缩写，可以辅助开发程序的应用软件。）编辑器，那么你正好可以了解一下我们国内团队开发的Hbuilder。

回到正题，Hbuilder内置的Emmet插件，虽然可以大大提高我们前端代码编辑速度，而且本身具有自动补全CSS3浏览器私有属性的功能，但是实现方法略显困难。如下图

上图中第一个a元素内为写法，第二个a元素内为点击tab后补全之后。如上，如果我们想使用Emmet的浏览器私有前缀补全必须采用缩写的写法，Emmet会自动识别补全。写出完整的属性或者靠IDE补全之后的属性是不能触发Emmet的浏览器私有前缀补全功能的。这样导致的后果是什么呢？

我觉得有两点不好

一是：对于熟练编写CSS属性的开发者来说，代码如飞已经做到了，一个完整的属性不出一秒钟就可以完整打出来，如果想触发Emmet的浏览器私有前缀补全功能必须简写，缩写，看似书写量小，但是要思考如何简写，缩写，无形中对大脑增加了额外的计算量。

二是：对于还不熟练的前端开发者来说，开始就使用没有规范的简写实在不是一个好的学习方法，拼写完整属性才是快速有效的成长方式。

所以面对多浏览器私有属性的编写，我们需要的是一个不妨碍学习，又尽可能快的解决方案。

Autoprefixer

这时候，Autoprefixer就要上场了。这是个什么玩意儿，说白了就是一个后编译器，可以在我们保存源代码之后自动编译出一个浏览器私有前缀补全的版本。其实我也是刚刚接触前端自动化工具，理解的也不是很深，摸索着实现了，具体运作流程如下图：

具体配置过程可以参考教程：

了解什么是gulp：https://segmentfault.com/a/1190000004527820

gulp入门教程（强烈推荐）：http://www.ydcss.com/archives/18

gulp多任务流处理：http://www.techug.com/gulp

配置好了之后我们就可以使用终端命令来编译我们的CSS文件了，但是每次都要使用终端命令是不是太麻烦了！而且我们使用了一个强大的IDE编辑器，能不能让二者结合一下呢？

很幸运，答案是肯定的。

Hbuilder和autoprefixer

我们打开Hbuilder，找到工具——预编译器设置

选择CSS后缀，点击编辑，在新窗口的触发命令地址中填入我们gulp.cmd的路径，参照我途中的路径应该很容易找到。

命令参数这一行就填入我们的任务触发命令，一般在终端中我们要使用一个任务命令是要加上工具命令的比如：

#gulp testAutoFx

但是这里我们只用填入任务命令就可以了。

最后我们再测试一下，当我们在原文件中写入一个符合W3C标准的属性后，保存操作会自动触发处理，编译出的文件正确的补全了浏览器前缀。

以后的这一切我们都不用去操心了，我们只用严格的按照W3C标准去写属性就好，剩下的任务就交给autoprefixer就好了，感觉世界又变得美好了，呼~