前端项目构建之yeoman

各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发yeoman,bower ,grunt .###

关于这三个工具在这里就不过多介绍了,没有用过的散仙们可以自行访问各自的官网进行了解

  1. yeoman(脚手架工具):http://yeoman.io/
  2. bower(包管理工具): http://bower.io/
  3. 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

如果有错,请大神及时反馈给我,不要让我错下去,谢谢!敬礼#

posted @ 2016-08-14 00:15  追梦-dream  阅读(1837)  评论(0编辑  收藏  举报