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,可以複製到手機上安裝調試,看看手機上運行的效果。