80781792 2014-07-05
party_bid这个项目的第一张卡已经做完有一段时间了,现在就开始这个项目使用的东西做一下简单的总结。
1.首先说一下yeoman。yeoman是google团队和外部贡献者团队合作开发的,yeoman主要有三个部分组成:yo(脚手架工具),grunt(构建工具),bower(包管理器)。通过yeoman我们可以快速的构建一个web项目工程。
先来说说yeoman的安装:
安装yo,要确定电脑已经安装了npm和node.js,在终端输入命令,
npm install -g yo
如果你使用的npm是1.2.10或是以上,你可以自动的安装grunt和bower,如果是以下的版本,需要手动安装,大家也不用考虑这些,直接在终端输入命令即可安装。
npm install -g grunt-cli bower
如果你以前安装了grunt,你需要首先卸载grunt
npm uninstall -g grunt
此外,为了能够创建工程,还需要安装generator-webapp
npm install -g generator-webapp
接下来就让我们来创建一个工程。
mkdir my-project //为自己的工程创建一个文件夹 cd my-project //进入到该文件夹下 yo webapp npm install -g generator-angular yo angular
这样就为自己创建了一个工程,如果中途有关于npm的错误的话,可以再执行一下
npm install
2.为了使用jade,需要在已经建完的工程里配置jade的插件
关于jade,和html,haml的功能一样,jade和haml都解决了html繁琐标签的问题,使得书写更加简洁了。
首先安装jade插件
npm install grunt-contrib-jade npm install grunt-contrib-jade --save-dev //安装到工程文件夹下
找到工程文件夹下的Gruntfile.js文件,打开文件找到module.exports=function(grunt){},在里面添加“grunt.loadNpmTasks('grunt-jade');”,再找到watch{},在里面添加
jade: { files: ['<%= yeoman.app %>/views/*'], tasks: ['jade'] },
最后在grunt.initConfig({})中添加需要转化的jade文件
jade:{ create_activity: { src: 'app/views/create_activity.jade', dest: 'app/views/create_activity.html' }, }, //填对相应的jade和html的文件的路径,上面只是列举的例子,大家要根据实际情况
一般大家对html比较了解熟悉些,刚开始可能会有些不习惯,我也很不习惯,但是用久了,是很方便的,省去了html那繁琐的标签,代码看上去更清晰。
3.cordova的安装应用
写android应用的人需要用到cordova来对程序进行封装。
首先要确保自己已经安装有:git,nodejs,android-sdk
接着只需要执行以下几步:
sudo npm install -g cordova //安装cordova sudo npm install -g yeoman sudo npm install -g generator-angular //如果已经安装yeoman就不需要再安装了 mkdir my-workspace cd my-workspace cordova create demo com.company.demo "DemoApp" cd demo cordova platform add android mkdir webapp && cd webapp yo angular webapp sudo npm install grunt --force //先将你的工程复制粘贴到webapp文件夹下再执行,记住删除文件夹下原先的内容 grunt server //运行看一下 rm -rf ../www/* //删除www文件夹下的内容 cp -rf dist/* ../www/ //复制dist文件夹下的内容到www文件夹下 cd .. cordova build //生成apk文件
此时,apk的文件可以在platforms/android/ant-build/中找到*debug.apk,可以复制到手机上安装调试,看看手机上运行的效果。