party_bid第一张卡小结

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

扫描二维码关注公众号，回复： 564279 查看本文章

接下来就让我们来创建一个工程。

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

party_bid第一张卡小结

猜你喜欢