Grunt一辈子的好基友:yeoman

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

时间: 2024-10-31 21:21:53

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

在Windows环境下用Yeoman构建AngularJS项目

本文将通过 Yeoman 创建一个 AngularJS 应用,同时 也能感受到 Grunt 和 Bower 的功能. 认识Yeoman Yeoman 是一位戴帽子.立意奇颖的人. Yeoman 是一套工作流程. Yeoman 是Web 应用开发脚手架. 通过很少的命令,就能给你整个应用或者独立的模块生成模板代码,比如控制器或者模型.Yeoman 可以启动预览 Web 服务器,观察文件,如果被编辑,就会重新加载的变化和编译你的 Sass . Yeoman 也可以运行单元测试,最小化代码,优化图像等

Yeoman的好基友:Grunt

grunt介绍 前端不能承受之痛 1.这是我们的生活 文件压缩:YUI Compressor.Google Closure 文件合并:fiddler + qzmin 文件校验:jshint 雪碧图:cssGaga sass编译:sass/compass 文件打包:require + r.js / seajs + wpm ... 2.究竟痛在哪里 下载难 /(版本)管理难 YUI Compressor:https://github.com/yui/yuicompressor Google Clos

git-求解答grunt serve 不成功。按照网上搜索想搭建yeoman出错

问题描述 求解答grunt serve 不成功.按照网上搜索想搭建yeoman出错 求问.在线等搭建yeoman时报错,求大神指点 解决方案 无效的选项,你的命令敲错了

乔纳森和乔布斯:好基友,一辈子

在苹果,他比除我之外的所有人管理权都大,没人能指使他或干预他做任何事.我就是这么规定的. --史蒂夫•乔布斯 2004年7月,史蒂夫•乔布斯因胰腺肿瘤接受外科手术.在他刚刚跟癌症斗争完第一个回合时,就要求见两个人,一个是他的妻子劳伦•鲍威尔•乔布斯,另一个就是乔纳森•艾夫. 一起日日夜夜工作了8年后,乔纳森和乔布斯建立起一种特殊又亲密的关系.他们两个几乎形影不离,一起参加各种会议,一起共进午餐,在很多个下午,他们一起在工作室研究未来的项目. 在接受第一次手术之后,乔布斯没能痊愈,他在2009年5

Grunt 插件开发例子

插件的目的 最近项目前端用的是yeoman来进行压缩,合并等,使用yeoman的时候,需要静态页里配置构建块,yeoman根据配置好的内容动态生成合并,压缩用的配置文件. 比如下面这段代码 html <!-- build:js({.tmp,source}) js/json.js --> <script src="lib/json/json2.js"></script> <!-- endbuild --> <!-- build与<

grunt从入门到自定义项目模板

文章还可在我的github上找到,排版更友好一点:grunt从入门到自定义项目模板 一.Grunt入门介绍 1. Grunt是神马 基于任务的命令行构建工具(针对JavaScript项目) 链接:http://gruntjs.com/ 2. 使用Grunt的理由 前端的工具算得上是五花八门,在介绍如何Grunt之前,首先我们得反问自己: Grunt能够帮我们解决什么问题? 是否有其他更合适的替代方案? 3. Grunt能够帮我们解决什么问题? 作为一名开发人员,我们见过了不少功能胡里花哨但并不实

用Yeoman构建AngularJS项目

这篇文章不是一篇翻译也不是一篇原创文章,类似于一篇学习笔记,主要是记录一些关键的过程,方便查阅加深理解和记忆. Yeoman 介绍 Yeoman 是 Google 的团队和外部贡献者团队合作开发的,他的目标是通过 Grunt(一个用于开发任务自动化的命令行工具)和 Bower(一个HTML.CSS.Javascript 和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流. Yeoman 的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系

Yeoman提供各种Web应用开发中所需的实用功能

浏览器端所包含的 HTML.CSS 和 JavaScript 代码也变得更加复杂.对于日益复杂的前端代码,需要有更好的流程和工具来管理开发的各个方面,包括初始的代码结构.开发流程和自动化测试等.Yeoman 是一个新兴的工具.它结合了 Yo.Grunt 和 Bower 等工具,组成了一个完整的工具集合,提供各种 Web 应用开发中所需的实用功能. Yeoman 的最大优势在于它整合了各种流行的实用工具,提供了一站式的解决方案,使得 Web 应用开发中的很多方面变得简单.Yeoman 使得开发人员

Grunt插件快速入门教程

这里记录了Grunt插件开发的一些关键的点,作为笔记,比较简明扼要,更适合对Grunt有一些了解的同学.注意:本文中的演示在 windows 操作系统中,Linux 或 OS X 可能有一些小区别. 一.环境准备 1. 安装 Node.js 在 Node.js 官网 选择合适的版本下载并安装.安装完成之后,打开 cmd 命令窗口,输入 node -v ,如输出版本号,则证明安装成功. 2. 安装 grunt-cli 根据 Grunt 官方的文档 ,打开 cmd 命令窗口,输入 npm insta