Gulp 与 Grunt

[lmk123]

毕业之后，我去的第一家公司使用的前端构建工具是 Ant，使用时需要配置 build.xml 和 ant.properties 文件，构建流程一点也不直观，而且修改时还需要在两个文件之间来回看；后来来到现在这家公司，正好是 Grunt 正火的时候。它最吸引我的地方就在于它使用的是 node.js，对前端来说多么友好啊。

再后来，gulp 横空出世。简单的了解之后，我认为它与 grunt 是同样的工具，不值得再花时间。直到今天，我在网上看到 gulp 4.0 就要发布的消息，于是在 github 上查看了下它的项目主页，发现标星数(11366)居然比 grunt(9050) 多。

我意识到，gulp 后来居上，一定是有更吸引人的地方，所以我稍微研究了下。

gulp 给我的第一印象就是：简单。它的文档居然只有一个页面，要不了多长时间就看完了。读完之后，我发现它是一个“流”构建工具，这正是它与 grunt 最大的区别（虽然我觉得这无非就是减少了构建时间，但这其实无关紧要）。

之后我就开始 Hello World 了。我一直都喜欢追求最新版本，所以使用了暂未发布的 gulp 4.0（实际上它已经开发完成，只是还没更新 API 文档，所以一直没有正式发布）。

作为练习，我对照着项目里面现有的 Gruntfile.js 写了一个 gulpfile.js(查看 Gist)。gulp 写起来很轻松，因为无需像 grunt 那样进行配置，而是像写真正的 nodejs 程序一样。所有的任务都是一个函数，所以无需像 grunt 那样使用 grunt.task.run(['task']) 的方式来调用配置对象里的任务。

学习过程中，唯一遇到的坑就是 gulp.src(globs[, options]) 方法里的 options.base 设置，它的默认值为：

Type: String. Default: everything before a glob starts

我就奇怪我输出的文件位置怎么乱七八糟的。- -

gulp 确实是一个很好用的工具，相比 grunt 这个庞大的“系统”而言，它简单小巧，并易于使用，也难怪会后来居上了。