前端项目构建之yeoman

zgdy

各位好啊，我又和大家见面了，也许你已经不记得大明湖畔的容嬷嬷，但是只要记得博客园中的我就好，希望我的博客能像一股清风，为你驱散炎热的酷暑，好了，废话不多说，开始上干货，我今天带给大家的是前端工程化开发yeoman，bower ,grunt .
关于这三个工具在这里就不过多介绍了，没有用过的散仙们可以自行访问各自的官网进行了解

• yeoman(脚手架工具）：http://yeoman.io/
  
• bower(包管理工具）：http://bower.io/
  
• 　　grunt(构建工具）：http://www.gruntjs.net/
  一：准备工作
  由于这三个工具都是需要利用npm包下载的，所以需要安装node.js进入到node.js官网https://nodejs.org/en/你会看到两个绿色的大按钮，选择稳定版本的node.js安装就行，安装过程就不细说了，全程傻瓜式安装，下一步，下一步。。就行了，当你安装完node的时候，说明我们已经成功了三分之一，还有三分之二需要我们去完成。剩下的三分之二也是本次讲解的干货，希望对各位能够有所帮助。好了，干货走起，敌军还有三十秒到达战场，碾碎他们。
  　　1.安装完node后打开终端输入node -v 出现下图则说明安装成功。
  

　　2.安装git
　　Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Yeoman自动构建项目时会用到该软件，所以我们先安装好。到Git官网http://git-scm.com/download/上下载并安装，安装过程和node一样遵循傻瓜式安装

　　3.安装yeoman,grunt,bower
　　在命令提示符中运行npm install -g yo grunt-cli bower

　　4.安装generator在命令行输入yo

　　5.使用yeoman构建项目，俗话说养兵xx，用兵xx，（ps:原谅我语文是体育老师教的，忘记那句话咋说的了）
　　创建一个工作目录，用于存放Yeoman项目。我在D盘下新建Angular的app工作目录,命令行进入，输入yo命令,用上下键选择webapp

　　这里我们不选择Sass，因为需要Sass的话运行环境是Ruby，在windows下配置会非常麻烦；选择bootstrap；不选择Modernizr；点击回车，经过几屏的信息滚动后，会提示项目构建完成，文件目录如下：

　　app 为项目主目录，是部署的根目录
　　node_modules 为 nodejs的包文件
　　test 为测试目录，专门用于单元测试，用的是 mocha 来测试
　　Gruntfile.js 是配置 grunt 自动化任务的配置文件，具体配置可以参考下 Grunt官网
　　就这样，一个项目就搭建好了，下一次我将会为大家详细说明grunt 的用法，这个是重点，难点，拿着笔点着字 这个考试要考的。。（哈哈本章节到此结束，欲知后事如何，敬请期待下集）顺便推广下一个前端开发群474471759
如果有错，请大神及时反馈给我，不要让我错下去，谢谢！敬礼