【转】Yeoman自动构建 Angularjs 项目
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 项目的更多相关文章
- Yeoman自动构建js项目
Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...
- 好文推荐系列---------(4)使用Yeoman自动构建Ember项目
好文原文地址:http://segmentfault.com/a/1190000000368881 我决定学习前端开发的效率工具Yeoman.本文将首先介绍Yeoman的基本情况,接着我们会使用Yeo ...
- 使用Yeoman自动构建Ember项目
Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...
- 使用Yeoman快速启动AngularJS项目开发
本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...
- Linux下Jenkins与GitHub自动构建Node项目(Vue)
根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...
- [react001] 使用webpack自动构建react 项目
1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...
- 小伙伴想学Jenkins自动构建发布项目,我:安排上了!!
写在前面 趁着十一长假,很多小伙伴都在悄悄学习,有些是为了能够顺利通过面试,进入大厂升职加薪.有些则是为了进一步巩固和提高自己的专业技能,希望有朝一日能过成为互联网架构师乃至技术专家.这不,就有小伙伴 ...
- jenkins自动构建前端项目(window,vue)
我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码 构建项目 把构建后的代码上传到服务器 如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以 ...
- 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: ...
随机推荐
- Linux配置VNC实现远程图形化操纵
问题描述 有些时候需要用到图形化,其实可以通过其他途径实现.但是懒惰的就喜欢VNC,总的老说都是需要图形组件的 问题解决 在Centos测试 一.图形化的Linux 01.安装 rpm ivh vn ...
- [ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:create (default-cli) on project standalone-pom: Unable to parse configuration of 3: mojo org.apache.maven.plugins:
问题: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:create (defau ...
- PHP-- 三种数据库随机查询语句写法
1. Oracle,随机查询查询语句-20条 select * from ( select * from 表名 order by dbms_random.value ) where rownum ...
- SharePoint 2013 本地开发解决方案以及远程调试
转自:http://www.cnblogs.com/jianyus/p/3523387.html 在SharePoint开发中,我们需要在部署有SharePoint环境的服务器中开发,这是一件让人很苦 ...
- Jenkins+svn+maven
首先我们在我们的服务器上安装好svn和maven 这里在前两步骤基本上没有啥问题,主要就是在Jenkins的步骤我弄了好长时间,这里记录一下 Jenkins的问题我是在这个网址解决的:http://b ...
- [转]js中的时间与毫秒数互相转换
原文地址:http://blog.sina.com.cn/s/blog_77cb836301015icr.html [1]js毫秒时间转换成日期时间 var oldTime = (new Date ...
- jsp内置对象作业2-留言簿
1.留言簿页面:liuYan.jsp <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- Django-Json 数据返回
1 .引入Json import json json.dumps(数据)
- 【BZOJ 2115】【WC 2011】Xor
计算1到n的一条路径使得路径上的值xor和最大. 先任意走一条路径计算xor和,然后dfs的时候处理出所有的环的xor和,这样对于所有的环的xor和求线性基,在任意走出的路径的xor和上贪心即可. 正 ...
- 【51NOD 1478】括号序列的最长合法子段
很恶心啊,一道水题改了半天,主要是各种细节没有注意到,包括左括号剩余时有可能会出错的情况,需要从后往前扫 贡献一组测试数据: ((()))())(())(( 答案:8 1 #include<cs ...