party_bid第一张卡小结

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,可以复制到手机上安装调试,看看手机上运行的效果。

相关推荐