本文参考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的入门内容了
分享到:
相关推荐
使用npm install -g yo安装 Yeoman入门安装: npm install -g generator-leaflet 创建文件夹: mkdir my-map-app && cd my-map-app 脚手架应用程序: yo leaflet 运行gulp进行构建并运行gulp gulp watch进行预览...
入门 您可以将此生成器用作前端项目的设置。 随时修改。 什么是约曼? 关于 yeoman 的最佳知识库在他们的网站上: generator 快速安装yeoman 如果你没有 npm 然后去: 安装 npm sudo npm install npm -g 安装 ...
入门 什么是Yeoman? 技巧问题。 没关系是这个人: 基本上,他戴着顶帽子,住在您的计算机中,然后等待您告诉他您希望创建哪种应用程序。 并非每台新计算机都预装了Yeoman。 他住在软件包存储库中。 您只需要问他...
BridgePhase 的 Yeoman 生成器这将作为 BridgePhase 项目的脚手架生成器。在本地安装生成器模块要在本地使用这些,请克隆存储库并导航到generator-*文件夹之一。 从那里,执行: npm install 其次是npm link 这些...
入门 你需要先安装 Node.js,然后安装 Yeoman: npm install -g yo 用法 要从 npm 安装 generator-big-starter,请运行: npm install -g generator-big-starter 最后,启动生成器: yo big-starter 发展 检出...
基于express命令行工具的Yeoman Expressjs生成器。 产品特点 基本或MVC样式的文件结构 CoffeeScript支持 具有文件监视和livereload功能的Gulp或Grunt构建工具 .editorconfig用于在文本编辑器中保持一致的编码样式 ...
入门 什么是约曼? 套路问题。 这不是一回事。 是这个人: 基本上,他戴着大礼帽,住在你的电脑里,等着你告诉他你想创建什么样的应用程序。 并非每台新计算机都预装了 Yeoman。 他住在包存储库中。 你只需要问他...
生成器-eslintrc Yeoman 生成器,用于在您的项目中设置 。入门先决条件npm install -g yo安装从 npm 安装 generator-eslintrc: npm install -g generator-eslintrc用法yo eslintrc执照麻省理工学院
入门 什么是Yeoman? 技巧问题。 没关系是这个人: 基本上,他戴着顶帽子,住在您的计算机中,然后等待您告诉他您希望创建哪种应用程序。 并非每台新计算机都预装了Yeoman。 他住在软件包存储库中。 您只需要问他...
入门 什么是Yeoman? 技巧问题。 没关系是这个人: 基本上,他戴着顶帽子,住在您的计算机中,然后等待您告诉他您希望创建哪种应用程序。 并非每台新计算机都预装了Yeoman。 他住在软件包存储库中。 您只需要问他...
generator-starterkit 支持前端开发Yeoman生成器。技术领域 :自动化并增强您的工作流程。 CSS预处理器 :具有超能力CSS。 :更少扩展具有动态行为CSS。 模板/标记:模板引擎。 JavaScript :立即使用下一代...
这个 yeoman 生成器通过创建 Telosys 工具配置来初始化一个空项目。 您只需回答问题,您就可以在具有 Telosys Tools 插件的 eclipse 中导入此项目。 您将能够使用 Telosys 工具生成您的应用程序。教程安装 yeoman ...
Yeoman 生成器,用于创建 gitignore 模板或将 gitignore 模板添加到 .gitignore 文件。 ###入门 和是必需的。 > npm install -g generator-gi ###命令 列出所有gitignore模板主办 。 > yo gi:list 在 ....
Tuts +教程:React入门授课教师:汤姆·惠特布雷德(Tom Whitbread) React通过其组件,数据绑定和View层控件来帮助您快速构建最先进的同构网站。 使您在UI层上拥有更多功能和更高的精确度。 在本教程中,我们讨论...
入门安装 Yeoman npm install -g yo安装 Bitovi Components Generator(本地) git clone git@github.com:bitovi-components/generator.gitcd generatornpm link启动生成器yo bitovi-component ` < component> ` 这...
有关入门指南,API文档等,请参见。 如果遗漏,错误或不清楚,请打开一个问题。 谢谢!贡献我们热爱贡献者! 请参阅我们的以开始使用。谷歌分析为了了解应用程序的使用方式,我们将向报告使用情况信息。 如果您不...
入门 首先创建一个新目录,然后cd进入其中: mkdir my-new-chrome-extension && cd $_ 安装生成器: npm install -g generator-chrome-extension-simple 运行: yo chrome-extension-simple 需要有关 Chrome 扩展...
有关 Yeoman 的更多信息,请参阅 有关 Bottle 的更多信息,请参阅入门$ npm install -g generator-pybottle 确保安装了 python virtualenv,如果没有运行: $ pip install virtualenv 用法$ yo pybottle - 生成一个...
发电机-发电机 Yeoman发电机产生Yeoman发电机入门安装: npm install -g generator-generator 运行: yo generator指令yo generator显示用于生成新发电机的向导yo generator:subgenerator 生成名称为的子yo ...
入门命令行生成器要从 npm 安装 generator-bin,请运行: npm install -g generator-bin生成新的工具包yo bin my-tools生成新命令yo bin:command test执行工具包的命令node my-tools.js test 如果您想直接执行您的...