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

 

         接下來就讓我們來創建一個工程。

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

 

 

 

 

發佈了13 篇原創文章 · 獲贊 2 · 訪問量 1349
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章