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. 维特比算法(Viterbi Algorithm)

      寻找最可能的隐藏状态序列(Finding most probable sequence of hidden states) 对于一个特殊的隐马尔科夫模型(HMM)及一个相应的观察序列,我们常常希望 ...

  2. Android开发之SlidingMenu开源项目的使用和问题

    一.关于如何导入lib 第一步:New Module  点击+: 第二步:选择Import Eclipse ADT Project: 第三步:选择你想引入的lib文件,选择完成后,会开始编译你添加的项 ...

  3. 东大oj-1511: Caoshen like math

    Worfzyq likes Permutation problems.Caoshen and Mengjuju are expert at these problems . They have n c ...

  4. Ubuntu安装出现左上角光标一直闪解决方式

    Ubuntu安装出现左上角光标一直闪解决方式: 01下载ubunu http://cn.ubuntu.com/download/ 02.软碟通 http://pan.baidu.com/s/1qY8O ...

  5. ThinkPHP上传返回 “文件上传保存错误!”

    这个问题,最终的由于 Local.class.php中的iconv('utf-8', 'gb2312' ,$filename)的问题 因为我上传的文件名中有 "-" 这个符号. i ...

  6. [转]hibernate在eclipse的逆向工程生成hbm.xml和bean类

    原文地址:http://www.xuebuyuan.com/210489.html 以前一直用myelipse,在myeclipse做hibernate逆向工程倒是很顺手了. 可是最近改用eclips ...

  7. IntelliJ_13书签

    一.书签视图   二.使用方法 1.添加书签:Ctrl+Shift+数字 2.跳转到书签:Ctrl+数字 来自为知笔记(Wiz)

  8. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  9. Mybatis + SpringMVC + Maven实现分页查询

    使用Mybatis + Maven + SpringMVC 运行时,突然被需要分页查询的功能给难住了 这里推荐采用的插件是PageHelper这个插件,使用起来十分方便.该插件支持以下数据库: Ora ...

  10. 【Codeforces 722C】Destroying Array (数据结构、set)

    题意 输入一个含有 n(1≤n≤100000) 个非负整数的 a 数组和一个 1-n 的排列 p 数组,求每次删除 a[p[i]] 后,最大连续子段和(不能跨越被删除的)是多少? 分析 因为都是非负整 ...