`
LiYunpeng
  • 浏览: 952632 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

yeoman入门

阅读更多
本文参考yeoman官方http://yeoman.io/codelab/meet-yeoman.html

首先yeoman是一个集成了grunt bower gulp的前段构建工作流工具,可以快速生成构建WebApp 甚至是AngularJS的App。


第一步,首先是安装
在写这篇文章的时候,最新版本的yeoman版本是1.4.7,后续更新可能会和描述的步骤不同,包括我在学习安装的时候,和网上很多文章也有出入,所以干脆就看官方稳当了。
前提条件需要安装的环境
Node.js v0.10.x+
npm (which comes bundled with Node) v2.1.0+
git

确保以上三个环境的安装
node --version && npm --version
npm install --global npm@latest
git --version

都有了则可以继续向下安装bower(管理前端依赖库的工具) grunt-cli(构建工具) 和gulp(类似grunt的构建工具,号称可以抛弃grunt)
npm install --global yo bower grunt-cli gulp
在全局分别安装以上
确保他们的安装成功
yo --version && bower --version && grunt --version

这里需要注意的一点就是,可能之前有以上环境的童鞋,如果版本过旧可能导致版本不支持,所以需要根据当时的要求安装限制最低环境以上的环境。

第二步
我们要使用yo的时候,首先会用它来帮我们创建和生成代码包,全自动化的工作流,所以我们不光需要安装以上的内容,还需要安装一些yo的功能
npm install --global generator-angular
(如果使用gulp的话,则是npm install -g generator-gulp-angular)
安装angular项目的生成器
npm install -g generator-webapp
(如果使用gulp的话,则是npm install -g generator-gulp-webapp)
安装webapp项目生成器

当然还可以使用yo命令,打开yo的使用菜单,然后选择Install a generator


第三部
开始创建项目,首先创建文件夹
mkdir yoTest && cd yoTest
然后创建angular项目
yo angular
(如果使用gulp的话,则是yo gulp-angular)
就会在该文件夹下生成项目相关的文件,在创建开始会让用户选择,是否使用Sass、Bootstrap等,通过空格进行选择或取消,然后回车
(当然,也可以使用yo webapp(yo gulp-webapp)来创建普通的web应用)

第四步
目录结构创建完后,就可以运行Simple了
grunt serve(也可以用gulp)
运行后,浏览器会自动打开页面,就可以查看页面内容和编写修改了。

服务在命令终端内启动监听,通过CTRL + C来终止服务

第五步
开发项目过程中,我们会随着项目扩大用到新的依赖
通过bower search angular-ui-sortable
来查找依赖库
通过bower install --save angular-ui-sortable
来进行安装

安装后在文件夹内可以看到自动下载的依赖包,并且这部分依赖包在下次使用grunt的时候,会自动加到index.html里面的引用里,方便许多,不过,如果是angular的模块依赖,还是需要自己在代码中去添加。
(另外此处需要注明一点,在bower install之后,如果有没有加入到index.html的情况,有可能是安装的名称或者选择的库不对,比如我遇到的highlightjs,直接安装git://github.com/isagalaev/highlight.js.git下的,这里面并没有bower文件,所以就是不支持bower,而且版本也比较老,后来发现,highlightjs git://github.com/components/highlightjs.git这个版才是,并且始终为最新版本)

第六步
发布项目文件
grunt serve:dist
编译压缩合并,并运行


以上就是yeoman的入门内容了
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics