Yeoman是什么?

Yeoman按照官方说法,它不只是一个工具,还是一个工作流。它其实包括了三个部分yo、grunt、bower,分别用于项目的启动、文件操作、包管理。

Yo: Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件。

Bower: 一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

GruntJS: GruntJS是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。

安装

基于nodejs,需要先安装node,安装时要确保 Add to PATH 被安装进去,然后安装依赖的包。
–安装git,http://git-scm.com/downloads,我是windows版本,安装的时候需要注意勾选Run git from the Windows Command prompt (从Windows命令提示符下运行git)项。
–安装gruntjs,参考之前的文章:一步一步安装Grunt
–Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。安装bower:
npm install -g bower

安装完成后执行:
npm install -g yo grunt-cli bower
其中 -g 代表要把 yo , grunt-cli , bower 这三个套件安装到全域 (global)

创建项目:
在命名行下,进入相应的目录后,输入:
npm install -g generator-angular
等执行完成后,输入:
yo angular
会出现由符号拼成的Yeoman的标志人物,及一些选择项。
根据需要进行选择操作,yo 会在最后开始完成所有的安装工作。这个命令执行要2分钟左右,会自动下载很多的依赖包。

AngularJS项目结构(Yeoman)
.tmp:临时目录
app:开发的源代码的目录
dist:生成用于发布的项目
node_modules:nodejs依赖包
test:测试文件的目录
.bowerrc:bower属性
.editooconfig:对开发工具的属性配置
.gitattributes:git属性的配置
.gitignore:git管理文件的配置
.jshintr:JSHint配置
.travis.yml:travis-ci持续集成的配置
bower.json:bower依赖管理
Gruntfile.js:grunt开发过程管理
karma.conf.js:karma自动化测试
karma-e2e.conf.js:karma端到端自动化测试
package.json:项目依赖文件

启动项目:
grunt server

好吧,遇到问题了,提示”unable to find local grunt”,原因大概是grunt需要安装在项目目录中。输入:
npm install grunt –save-dev
将安装包放在 ./node_modules 下(运行npm时所在的目录)

再次执行grunt server,就会发现浏览器被自动打开:http://localhost:9000/#/

执行:

grunt --force

生成用于部署的目录dist。

至此结束,还有一些问题。但总算是跑起来了~

转载自:http://www.k68.org/?p=1470

【转】Yeoman自动构建 Angularjs 项目的更多相关文章

  1. Yeoman自动构建js项目

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

  2. 好文推荐系列---------(4)使用Yeoman自动构建Ember项目

    好文原文地址:http://segmentfault.com/a/1190000000368881 我决定学习前端开发的效率工具Yeoman.本文将首先介绍Yeoman的基本情况,接着我们会使用Yeo ...

  3. 使用Yeoman自动构建Ember项目

    Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...

  4. 使用Yeoman快速启动AngularJS项目开发

    本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...

  5. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  6. [react001] 使用webpack自动构建react 项目

    1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...

  7. 小伙伴想学Jenkins自动构建发布项目,我:安排上了!!

    写在前面 趁着十一长假,很多小伙伴都在悄悄学习,有些是为了能够顺利通过面试,进入大厂升职加薪.有些则是为了进一步巩固和提高自己的专业技能,希望有朝一日能过成为互联网架构师乃至技术专家.这不,就有小伙伴 ...

  8. jenkins自动构建前端项目(window,vue)

    我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...

  9. Jenkins自动构建gitlab项目(jenkins+maven+giltlab+tomcat)

    环境准备: System:CentOS 7.3 (最小化安装) JDK: 8u161 (1.8_161) tomcat: 8.5.29 Jenkins: Jenkins 2.107.1 Gitlab: ...

随机推荐

  1. 使用 Socket 通信实现 FTP 客户端程序(来自IBM)

    FTP 客户端如 FlashFXP,File Zilla 被广泛应用,原理上都是用底层的 Socket 来实现.FTP 客户端与服务器端进行数据交换必须建立两个套接字,一个作为命令通道,一个作为数据通 ...

  2. 帕雷托最优(Pareto optimality)、帕雷托效率(Pareto efficiency)

    帕雷托最优(英语:Pareto optimality),或帕雷托最适,也称为帕雷托效率(英语:Pareto efficiency),是经济学中的重要概念,并且在博弈论.工程学和社会科学中有着广泛的应用 ...

  3. TF2ZP函数

    TF2ZP 中TF是什么意思?   Transfer function   tf 就是传递函数的意思,简称传函 tf2zp是将传递函数转换为零极点形式的一个转换函数   [Z,P,K] = TF2ZP ...

  4. pageEncoding与contentType属性

    1图例分析 由图中可以看出,这个两个属性没有任何关系. 把这两个设置成不同的编码格式对中文显示不会产生任何影响 2.原因分析 pageEncoding规定了以什么编码方式存储和读取,使两者保持一致性, ...

  5. 什么是smarty?

    什么是smarty? Smarty是一个使用PHP写出来的模板PHP模板引擎,由PHP.net官方提供 ,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用PHP程 序员同美工分离,使用的程序员改 ...

  6. iOS开发--换肤简单实现以及工具类的抽取

    一.根据美工提供的图片,可以有两种换肤的方案. <1>美工提供图片的类型一: <2>美工提供图片的类型二:这种分了文件夹文件名都一样的情况,拖入项目后最后用真实文件夹(蓝色文件 ...

  7. 单例模式(Singleton Pattern)

    意图 保证一个类仅有一个实例,并提供一个该实例的全局访问点 可将一个实例扩展到n个实例.限定某类最多只能创建n个实例. 双重锁定实现单例模式 C# public sealed class Single ...

  8. 让编辑器支持word的复制黏贴,支持截屏的黏贴

    chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等: 比如知乎上面的回复中可以直接黏贴图片,  就不需要手动点击图片上传按钮, 选择图片, 确认上传等等: 知乎参考地址:打 ...

  9. hdu 4612 强连通

    题意:有一些联通的地方,如果2点间只有一条路径,这样的边叫做桥,现在让你添加一个桥,使最后的桥最少,问最少的桥使多少? 先求一次强连通分量,然后图就分成了几个块,将这几个块看做点,求出总共有多少条重建 ...

  10. 类-string/Manth/Random/DateTime-及练习

    类一.string类:.Length 字符串的长度 .Trim() 去掉开头以及结尾的空格.TrimStart() 去掉开头的空格.TrimEnd() 去掉结尾的空格 .ToLower() 全部转换为 ...