小编今天主要是给大家简单介绍一下前端构建工具，包括CodeKit、Grunt、Bower、Gulp、Browserify、Webpack和NPM脚本。

CodeKit和Grunt都是2012年早些时候面世的。他们的主要功能就是帮助你快速搭建前台页面。他们能够编译，压缩代码，压缩资源图片，并且能够和其他工具合作完成任务。不同的是，CodeKit是有界面的。

CodeKit很快流行起来主要是因为他有可操作界面，而不需要在命令行下操作。很快地，他就成为网页开发人员的必备神器。

目前CodeKit已经到了3.0版本，但从2014年以后，就慢慢变得不再流行。

Grunt最初是一个命令行工具，通过脚本来配置和执行任务。Bower在Grunt发布不久后面世，它的主要功能是管理客户端的依赖包。Grunt、Bower加上NPM似乎已经可以满足自动化构建前端项目的需要。

不过很快我就意识到Grunt的一些问题，当任务流程过于复杂时，Grunt显得不是那么的灵活，并且也不能完成并行任务，而这要求用户不得不管理两组包（bower_components VS node_modules）

Grunt和Bower也开始慢慢变得不再流行，但稍安勿躁，已经有替代品出现 —— Gulp或者Webpack。

Gulp & Browserify

在Grunt面世后，又过了1年半，Gulp发布了。使用Gulp，人们可以用JavaScript或者JSON编写构建脚本，编写函数和变量，在任意地方使用条件 —— 当然并不是因为这些，我们就可以写出漂亮的构建脚本，但至少它使这成为可能。

虽然根据Google的趋势分析来看，Gulp也逐渐变得不再那么流行，但至少短时间来看，它会是主流工具之一。Gulp和Angular有着很深的联系，在Angular的世界里，它是两个最受欢迎的工具之一。并且现在有Angular2和Angular3，Gulp依旧有它的一席之地。

Webpack是这个领域的新生儿。现今，JS世界所有比较酷的新工具都会使用React和Webpack。由于package.js的一半内容都是配置信息，npm又重新回来了。人们不再使用命令gulp taskName，而是使用npm taskName。使用npm install来安装依赖包，使用npm prune来卸载那些不需要的包，使用npm build来构建你的产品，使用npm start来启动服务，而这一切都是使用JavaScript写的。

Webpack、React和ES2016这将是这个领域的未来。ES2016认为是下一代的JavaScript。当有新的技术出现，我们都要花时间去学习他们，但我们以这样的方式来生存。

希望今天小编分享的这些内容对你们来说是有帮助的。更多详情可以关注武汉北大青鸟的网站。