Yeoman 现代应用程序网站的搭建工具-介绍-安装-应用

1. Yeoman 的介绍

参考链接:http://yeoman.io/ 官网
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
SCAFFOLDING -> 脚手架
WEBAPPS -> 类似于 PC 或者 移动端的站点,应用程序,假设我们再百度首页打开百度地图,百度地图这样比较重要的站点就是 WEBAPPS

什么是 Yeoman?

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.
To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.
Through our official Generators, we promote the "Yeoman workflow". This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.
With a modular architecture that can scale out of the box, we leverage the success and lessons learned from several open-source communities to ensure the stack developers use is as intelligent as possible.
As firm believers in good documentation and well thought out build processes, Yeoman includes support for linting, testing, minification and much more, so developers can focus on solutions rather than worrying about the little things.
自耕农的帮助你启动新项目,处方的最佳做法和工具来帮助你保持生产力。
为了做到这一点,我们提供发电机生态系统。一个生成器基本上是一个插件,可以用'命令'来完成整个项目或有用的部分。
通过我们的官方的发电机,我们提倡“自耕农工作流”。这个工作流是健壮的、固执己见的客户端堆栈,包括帮助开发人员快速构建漂亮Web应用程序的工具和框架。我们提供一切所需的启动,没有任何正常头痛与手动设置有关。
有了一个模块化的体系结构,我们可以利用来自几个开源社区的成功和经验,确保开发人员使用的堆栈尽可能的智能化。
坚定的信徒在良好的文档和深思熟虑的建立过程,自耕农包括支持毛,测试,缩小和更多,因此开发人员可以专注于解决问题而不是担心小事情。

简单来说:
她就是可以提高你的生产力,把一些不是你该做的工作,就是那些底层的工作都帮你做好了,比如:下载个库、编译个 Less 等等
装好了之后 npm install -g yo,它会自动生成一个 yo 命令这样的命令在我们的系统里帮助我们生成这样的一个网站,这个网站最基本的你所需要的库,你所需要的其他东西都在了,他就是一个发电机,他不会像你平常的那样自己去下载一些需要集成的东西比较的痛苦

参考链接:http://www.iinterest.net/2013/05/04/f2e-tool-yeoman/一遍写的比较好的国内教程

Yeoman 特性:
•快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地创建新项目的骨架。
•自动编译 CoffeeScrip 和 Compass——在做出变更的时候,Yeoman 的 LiveReload 监视进程会自动编译源文件,并刷新浏览器,而不需要你手动执行。
•自动完善你的脚本——所有脚本都会自动针对 JSHint 运行,从而确保它们遵循语言的最佳实践。
•内建的预览服务器——你不需要启动自己的 HTTP 服务器。内建的服务器用一条命令就可以启动。
•非常棒的图像优化——使用 OptPNG 和 JPEGTran 对所有图像做了优化。
•生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单,你只需要构建项目就好。
•“杀手级”的构建过程——你所做的工作不仅被精简到最少,让你更加专注,为你节省大量工作。
•集成的包管理——Yeoman 让你可以通过命令行轻松地查找新的包,安装并保持更新,而不需要你打开浏览器。
•对ES6模块语法的支持——你可以使用最新的 ECMAScript 6 模块语法来编写模块。这还是一种实验性的特性,它会被转换成 eS5,从而你可以在所有流行的浏览器中使用编写的代码。
•PhantomJS单元测试——你可以通过 PhantomJS 轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架。

Yeoman 有一些非常重要的组件:Grunt / Gulp 和 Npm / Bower,他把这几个优秀的框架进行集合最后生成出了这个非常伟大的框架 Yeoman ,我们国内的例如 FIX 这样的是也集成了后端的, Yeoman 是一个专注于前端的开发框架


image.png

Yeoman 是由三个工具的组成:YO、GRUNT、BOWER
YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具。
GRUNT:前端构建工具,jQuery就是使用这个工具打包的。
BOWER:Web 开发的包管理器,概念上类似 npm,npm 专注于 NodeJs 模块,而 bower 专注于 CSS、JavaScript、图像等前端相关内容的管理。

2. Yeoman 的安装

参考链接:http://yeoman.io/ 官网

  1. 在命令行中进行全局安装
npm install -g yo
  1. 执行 yo 命令,在命令行中显示如下

image.png

这个是让你按你的键盘的 上 下 按钮进行选择,这里我选择了 Get me out of here,回车 便出现了下面的欢迎界面
image.png

3. Yeoman 的应用

  1. 在桌面新建一个 yeomantest 文件夹,并进入该目录中
cd Desktop
mkdir yeomantest
cd yeomantest
  1. 执行程序
yo

会显示如下,让你去选择到底干什么

image.png

这里我们选择 Update your generators 更新,它可以帮我们更好地构建底层的这些东西,选择之后会跳出一个创建 koa 项目的提示 回车,然后便开始更新并创建项目

  1. 命令行中执行完毕之后,我们会发现在 yeomantest 文件夹中 的基于 koa 的项目已经创建好了
image.png

项目中的配置文件是这样的,自动安装了很多需要的包


image.png
  1. 上面的是用 yeoman 构建了一个 koa 项目,接下来我们在全局安装一个可以构建 webapp 的包,装过之后执行 yo 命令就会多出一个 webapp 项目的选项,这样可以构建一个 webapp 的项目

参考链接:https://www.npmjs.com/package/yo

npm install --global generator-webapp
  1. 在桌面新建一个 keomanWebapp 的文件夹,并在命令行中进入该目录
cd Desktop
mkdir yeomanWebapp
cd yeomanWebapp
  1. 执行下面的命令就可以创建一个 webapp 项目
//执行程序
yo
//选择 webapp
webapp
//或者是直接创建
yo webapp

命令行中显示如下

image.png

您希望包含哪些附加功能?这里我们选择的是 Sass
后面又让我们选择 bootstrap 的版本,在这里我们选择的是 4

然后是 选择DSL风格 BDD -> 回车
然后就开始便开始自动地创建项目文件,并安装所需要的所有依赖,整个项目创建的时间会较长一点,这个项目的机构就是下图这样的

image.png
  1. 这个库也可以安装 Angular 或者是其他的项目类型,然后进行自动创建
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,099评论 18 139
  • 接着上篇的《 利用Node.js搭建前端自动化平台 》我们开始搭建自己的前端工作流吧!要启动一个项目,最先要做什么...
    Max_Law阅读 3,071评论 0 7
  • 嗨,大家好,我是丽妃娘娘,好久不更新了。 《欢乐颂》相信大家都在看,我也是,从第一部开始,一直追到现在的第二部。其...
    丽妃娘娘阅读 289评论 1 1
  • 今夜我在这里,拍松稻草 今夜我在这里,繁星正好 今夜我在这里,世界和平 今夜偷牛贼不会悄然而至 夜、村庄和牛都在咀...
    扁竹桃仙人阅读 455评论 6 4