利用Node.js搭建前端自动化平台

我们在前面《 Node.js的本质 》一文中初步了解Node.js后，发现它功能很多呀，这么牛逼的东西赶紧学习。然而我一直翻看网上各种的教程，文档，都是什么学习node内核呀，API呀，node项目呀，看得头晕眼花，这个学习曲线这么陡，简直打击热情嘛，经过我一番纠结，终于确定了学习的路线，Node.js我为其总结三大块功能：

1. 利用Node.js搭建后台；
2. 利用Node.js编写脚本；
3. 利用Node.js实现前端的自动化；

这就是我学习Node.js想要达到的目标，毫无疑问学习应该由浅入深，所以大致的计划是这样子的：

• 为了尽快帮助到我的工作，同时显示自己是个专业的具有逼格的前端当然先要有一个属于自己的前端自动化工具平台。利用它实现下面等等功能（使用工具毕竟是最简单的）：

Task	Explain
编译	编译 Sass、Less、TypeScript ...
优化	合并压缩 JS、CSS ...
图片	压缩图片
文件指纹	添加文件指纹（md5）
刷新	实时自动刷新

• 然后学习写脚本，把它当成Java一样能做一下系统小工具（制作工具是第二步 -- npm脚本）；
• 最后就是能完整的搭建后台，实现一个完整的项目；

开始搭建工具平台

Node社区中有许多的插件可以完成上面所说的自动化，就要用锤子去npm下个锤子来用，缺个螺丝刀就下个螺丝刀。但是本人懒呀，记不住这多东西，就直接上npm买一个工具箱好了。这时就引出三大神器：

• Grunt
• Gulp
• Webpack

Grunt & Gulp 是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作。
webpack 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。

—— 来自博客 郭小北V5

因webpack跟其他两个工具本质上是不一样的，所以可以结合他们两个中的一个管理项目。

webpack 它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

现在就先来第一个撕逼点 Grunt 与 Gulp 那个好，看了一堆文章，反正最后我选了Gulp。当别人问你为什么的时候你就这样回答：
“ 遵循Unix管道机制，代码更加简单优雅，只要4个API就能掌控雷电！什么，Unix管道机制不懂？自己百度去吧！”

深入了解看看这篇知乎吧 —— gulp VS grunt · 萧强

接下来我们开始搭建自己的自动化工作流吧～

下篇《 Node.js 自动化工具 - YEOMAN 》

---

该篇收录于文集：Node教程