Yeoman,bower,Grunt的安装

最近看视频学习了前端自动化的一些知识，确实让我大开眼界。感受前端愈来愈神器了。同时跟着视频本身也尝试运用了一些工具去构建前端项目，可是中间碰见了不少坑，磕磕绊绊的才实现了一点功能，因此打算记录一下学习过程当中的笔记。

首先列举一下关键词：NodeJS、Git、Yeoman、bower、Grunt。 其中NodeJS做为核心，在它的基础上咱们能够利用Yeoman、bower、Grunt这三个前端工具实现前端自动化，而Git，主要是用它自带的 Git Bash命令行。为啥要用Git自带的命令行呢，这我就得吐槽一下了：网上的视频、博客、资料、翻译等等上面出现的有关Yeoman，Grunt这样的例 子都特么是用Mac OS X 下面实现的，我一个穷屌丝用windows系统的CMD跟着跟着就出问题了，换不了硬件设备，因此只能先用软件弥补。。

下面进入主题：

第一步：下载Node并安装。传送门：Node官网，去上面下载适合你系统的版本，而后安装就OK。安装成功的验证方式 ：cmd 中输入 node -v ,若是输出node版本号就说明没有问题。

第二步：安装Git。传送门：下载Git ,去上面下载适合你系统的版本，而后安装。安装教程百度便可，可是须要注意一点，执行窗口仍是要选择windows自带的比较好

也就是最后一步配置要选择 下面的选项。

这样作只是为了之后使用方便一点。具体方便在哪里，不告诉大家，大家本身去试。。。。

安装好Git 以后，桌面或者任意文件夹内点击鼠标右键就会看到 Git Bash here,这样的选项，点击后就能够看到咱们最主要的工具了。接下来就是安装Yeoman、bower、Grunt这三个工具了。

这里再提一点，由于国内的某些缘由，经过node安装工具可能会很是慢，这里须要咱们作一点修改，也就是使用淘宝npm镜像。具体方法以下：

1.命令窗口（上面提到的Git Bash here ）执行：npm config set registry https://registry.npm.taobao.org

2继续执行命令验证：npm info underscore （若是上面配置正确这个命令会有字符串response）

切换淘宝镜像的方法还有其余的，感兴趣的自行Google/百度。

安装Yeoman的命令：npm install -g yo

验证方式： yo -v 或者 yo --version 显示版本号

安装bower的命令 ：npm install -g bower

验证方式： bower -v 显示版本号

安装grunt的命令 ：npm install -g grunt-cli

验证方式： 输入grunt 会有提示

到这里基本的工具都已经安装好了。

这里再讲一下Yeoman、bower、Grunt分别是干什么的。

Yeoman：我理解它的做用是生成前端项目的总体文件结构。经过Yeoman能够生成一个简单的可是很是完整的前端项目文件结构，这个生成的项目已是一个能够运行的Demo,咱们能够在这个结构上拓展和改造，实现想要的功能。

bower：它的官网上的解释是： A package manager for the web，它就是一个依赖包管理工具，经过它咱们能够在项目中自动生成咱们须要的依赖包例如：JQuery、angular等，不须要再去网上找到它们的文件，下载下来在复制进项目这样繁琐的工做。

grunt：grunt的功能就厉害了，它能够对项目中的JS、CSS文件进行压缩、合并、混淆等等操做，还能实现前端的自动化单元测试，各类牛X的功能，让我这个前端小菜鸟看的眼花缭乱的。。。

到这里前端自动化的第一步已经迈出去了，接着学着用他们了。