yeoman是什么

yeoman主要包含了三个工具:yo、grunt、bower。我们先看下这三个工具分别是做什么的:

  • yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像)。
  • grunt:构建工具,主要用来运行各种任务,比如文件压缩、合并、打包等。
  • bower:主要用来做前端资源依赖管理,跟npm很像,区别在于:npm管理的是node模块的依赖,bower管理的是前端资源的依赖,如css、javascript文件等。

yeoman是做什么的

现在我们已经知道yeoman里面又什么东西了,那么它在我们的项目开发中扮演了一个什么样的角色呢?首先我们来看看官方对yeoman的定义:

MODERN WORKFLOWS FOR MODERN WEBAPPS

这句话其实比较抽象,很难一眼知道yeoman是做什么的。 我们注意里面的关键词 workflow  ,也就是说yeoman贯穿了前端项目开发的始终。

在用到yeoman的项目中,我们的工作流程一般是:

  1. 创建项目骨架:运行yo工具,通过各种yeoman-generator(模板)创建项目骨架。
  2. 下载前端资源:运行 bower install ,下载项目中依赖的前端资源,比如jQuery、bootstrap、angularjs等(非必要)
  3. 运行构建任务:运行grunt跑自动化构建任务(非必要)

入门例子:webapp

首先安装yo、bower、grunt-cli工具

npm install -g yo bower grunt-cli

然后,现在yeoman模板,比如 generator-webapp (yeoman的模板前端都是generator- )

npm install -g generator-webapp

初始化webapp项目,在任意空目录下运行下面命令,然后回答几个简单的问题

yo webapp

现在,项目骨架已经创建好了,运行下面命令安装依赖的前端资源

bower install underscore

最后,安装grunt依赖的包,运行构建任务,搞定!

npm install
grunt

为什么是yeoman,而不是grunt-init

grunt-init 的定位同样是前端脚手架。那 grunt + grunt-init 已经满足了我们从  项目创建  到  项目构建 的需求,为什么又冒出个yeoman出来? 从yeoman的受欢迎程度来看,可能有以下两方面原因:

  1. 解决了一些grunt + grunt-init 没有帮我们解决的问题
  2. 具有一些grunt + grunt-init 所没有的有用特性

答案是:两方面都有。

  1. 基于bower的前端资源依赖管理:这个的重要性无需强调,请回忆一下我们满头大汗就为了找到某个js文件,或因缺少某个依赖的js文件导致脚本出错的经历。具体可参考knight上周及本周分享 :)
  2. 子模板:相当有用的特性。你可以用它完成子项目创建、子模块创建、资源更新等工作,给项目提供了更多的灵活性。
  3. 基于问题的项目骨架构建:这点其实grunt-init也有,但yeoman明显做得更好,如二选一、单选列表、多选列表等。grunt-init 的问答流程内部实现则相对费解。。。

yeoman项目下几个重要的文件

主要就是下面几个文件,不赘述

  • Gruntfile.js:grunt任务声明的地方
  • package.json:项目依赖的插件,比如grunt任务依赖的插件等
  • bower.json:前端资源依赖声明

创建自己的Generator(模板)

什么是generator就略过了,模板。。。直接进入实操步骤

首先安装 generator-generator ,名字比较诡异,意思是“模板的模板”

npm install -g yo generator-generator

创建一个叫做 generator-blog 的目录,命令行下进入这个目录,然后运行

yo generator

然后你会看到下面这坨东东

 _-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `

回答下面两个简单问题,搞定

[?] Would you mind telling me your username on Github? chyingp@gmail.com
[?] What's the base name of your generator? blog

在目录下运行如下命令,让当前创建的模板成为全局的模块

npm link

在其他任意目录运行如下命令,创建项目

yo blog

稍微看下generator-blog的细节

进入generator-blog目录,看看里面都有什么, bower.json、 package.json不赘述,我们需要关注的点: app 目录是模板的核心目录

其中, index.js  是项目骨架创建的主要逻辑,里面包含了问答设置以及处理、各种目录、文件操作等(从模板目录到目标目录)。根目录下的package.json主要声明了模板的名字、版本、git地址等。。。

├── app
│ ├── index.js
│ └── templates
│ ├── _bower.json
│ ├── _package.json
│ ├── editorconfig
│ ├── jshintrc
│ └── travis.yml
├── test
│ ├── test-creation.js
│ └── test-load.js
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .travis.yml
├── LICENSE
├── package.json
└── README.md

generator细节深入

@todo

generator子模板创建

@todo

Grunt一辈子的好基友:yeoman的更多相关文章

  1. yeoman bower grunt等安装

    grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...

  2. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  3. yeoman(转)

    前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世, ...

  4. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

  5. Grunt上手指南<转>

    原文链接:http://www.hulufei.com/post/grunt-introduction 安装 如果之前有装过grunt,卸载之 npm uninstall -g grunt 安装gru ...

  6. 使用Yeoman搭建 AngularJS 应用 (11) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/prepare-production.html 让我们发布这个应用 优化产品的文件 为了创建应用的产品版本,我们想做如下的事情 检查你的代码 ...

  7. 前端工程构建工具之Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...

  8. 前端工程构建工具——Yeoman

    一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescrip ...

  9. Grunt上手指南(转)

    Grunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本 ...

随机推荐

  1. BFS 巡逻机器人

    巡逻机器人 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=83498#problem/F 题目大意: 机器人在一个矩形区域巡逻, ...

  2. iOS开发-定制多样式二维码

    iOS开发-定制多样式二维码   二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常 ...

  3. [CareerCup] 18.5 Shortest Distance between Two Words 两单词间的最短距离

    18.5 You have a large text file containing words. Given any two words, find the shortest distance (i ...

  4. java-常见异常

    一.运行时异常 1.空指针(java.lang.NullPointerException) 2.类型转换() 3.数组下标越界(java.lang.ArrayIndexOutOfBoundsExcep ...

  5. java web(三) Tomcat虚拟目录映射方式

    Tomact服务器虚拟目录的映射方式 web应用开发好后若想被外界访问,需要将web应用所在的目录交给web服务器管理,这个过程称为虚拟目录的映射. 方式一:在server.xml文件的host元素中 ...

  6. Java_Eclipse_Maven插件部署

    方法一:在线; Eclipse-help-Install New Software 1.下载地址: m2e - http://download.eclipse.org/technology/m2e/r ...

  7. 使用explain查看mysql查询执行计划

    explain语句: 字段解释: type:     all(全表扫描)     ref() possible_keys:     预测使用什么列做为索引 key:     实际使用的key     ...

  8. php date()获取的时间不对解决办法

    因为php默认获取的是格林威治时间,与北京时间相差8小时. 我们要获取到北京时间有两个办法: 1.修改php.ini配置文件: 打开php.ini文件,一般在php配置根目录下,找到其中的 ;date ...

  9. sql语句的各种模糊查询

    一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1.%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况 ...

  10. VMware+Fedora20+secureCRT7.0配置心得

    VMware10 XX版 下载地址 secureCRT7 XX版 下载地址 做好安装等准备工作,打开Fedora虚拟机: 首先.安装openssh-server yum install openssh ...