Weitere ähnliche Inhalte
Ähnlich wie 以Code igniter為基礎的網頁前端程式設計 (20)
以Code igniter為基礎的網頁前端程式設計
- 2. 自我介紹
• 渾名:Fillano、費大公
• 本名:馮旭平
• 工作:後端…有時兼前端
• 常用語言:Javascript,
PHP,
Java,
C#,
HTML,
CSS
• 出沒地點:iT邦幫忙、?、G+、plurk、
twiEer…(帳號皆為fillano)
- 5. 前端工程的歷史
• 最早,Web只有前端(WWW:
1990,
HTML:
1993)
• 經由HTTP傳送內容(0.9:
1991,
1.0:
1996,
1.1:
1997)
• 對於動態資料的需求,產生了後端工程
• 對於網頁呈現的需求,產生了前端工程
– Javascript,
1995
– CSS,
1996
– DOM,
1998
- 7. Accessibility
• 需要處理瀏覽器相容性的問題
– Reset
– Normalize
– Hacks…
• 需要處理裝置解析度的問題
– RWD…
• 需要能管理日趨複雜的CSS
– 架構方法:OOCSS,
SMACSS,
BEM…
– 中介語言:LESS,
SASS,
COMPASS…
- 10. 為了解決這些問題…
• 我們會使用許多Javascript
Library
• 我們會使用Javascript
Framework
• 我們會使用Bootstrap
• 我們會使用最佳化工具
• 我們會使用各種中介語言
– Compile
to
Javascript
– Compile
to
CSS
- 13. 設定
• 假設規劃靜態檔案都放在assets目錄
• 可以透過在applicadon/config/config.php中,
設定基底url:$config[‘base_url’]
=
‘/
codeigniter/’;
• 然後在applicadon/config/autoload.php中,
設定$autoload[‘helper’]
=
array(‘url’…);
• 在view中,呼叫<?=base_url()?>/assets/path/
stadc_file,就可以取得正確的url
- 14. 接下來
• 除非…
– 有什麼理由需要用到html
/
form 等helper,或
是Javascript
Driver
– 需要透過AJAX跟後端API收發資料
• 前端的工作跟CodeIgniter基本上就沒關係了
XD
- 16. 客戶會直接看到
• 我的經驗
– 客戶常常在Wireframe階段都沒感覺,看到畫面
才開始發揮想像力
– 對細節吹毛求疵
– 需求書通常規範了流程、資料、模組等東西,
對於呈現的部份反而比較模糊
- 18. 技術瑣碎複雜
• HTML
x
Javascript
x
CSS
x 瀏覽器版本
• 為了解決一些問題,需要使用更多的工具…
讓需要的技能更複雜了
• 技術的知識,對前端工程師來說是宿命
• 透過工具,還是可以讓工作更順利
- 20. 還是利用工具
• Bower:套件管理
• Grunt:自動化
• Yeoman:專案架構生成
• Gulp:另一個自動化工具
• 這些工具,都是使用Javascript(node.js)開
發的,對於前端工程師來說,比較沒有進
入障礙
- 23. 使用bower的好處
• 透過bower,就可以根據專案的需求,安裝需
要的套件
• 例如一個專案會使用到:
– Bootstrap:需要jquery版本>1.9
– Angular
– Jquery-‐easyui:需要jquery版本>1.9,但是不支援2.x
• 使用bower安裝時,他會根據版本的需求,自
動安裝依賴的jquery,並且調整成最合適的版
本
- 24. Bower怎麼用
• 先安裝node.js
• 透過`npm
install
–g
bower`來安裝bower
• 套件的預設安裝目錄是bower_components,
可以透過新增設定檔~/.bowerrc來修改預設
值
• 使用
bower
install
[套件名稱]或是[url]來安
裝套件
• 使用bower
init可以在專案目錄中加入
bower.json,專案使用的套件會紀錄在這裡
- 25. 實際操練
• 安裝node.js
• 安裝bower
• 建立~/.bowerrc
• 安裝套件並觀察安裝版本變化
• 使用bower
init建立bower.json,紀錄專案使
用套件
- 26. Bower的相關資訊
• 網站: hEp://bower.io/
• 怎麼指定版本:
hEp://semver.org/
• (npm以及bower都使用一樣的版本號標準)
- 27. 自動化
• 專案進行時,會使用各種工具進行各種工作,
例如
– 用CoffeeScript寫Javascript
– 把SASS編譯成CSS
– 進行單元測試
– Javascript壓縮
– CSS壓縮
– 圖檔最佳化
– 版本管理
• 使用不同的工具,還需要各自下命令,很麻煩
- 29. 常見的專案自動化工具
• Java
– Ant
– Maven
• PHP
– Phing
• Ruby
– Rake
• 在Node.js
/ 前端最常用的則是:Grunt及
Gulp
- 30. 安裝Grunt
• 同樣要先安裝Node.js
• 用npm安裝: `npm
install
–g
grunt`
• 使用npm
init或是手動建立package.json(至
少要有name,
version,
devDependencies)
• 依照需求安裝不同的任務(task)
– 例如要拷貝檔案,可以使用copy任務,他的
npm套件名稱是grunt-‐contrib-‐copy
– 安裝指令就是 `npm
install
grunt-‐contrib-‐copy
-‐-‐save-‐dev`
- 31. 使用grunt
• 在專案根目錄新增Grunxile.js檔案
• 檔案內容是Javascript程式,但是不難理解
• 根據自己的需求,搜尋合適的任務
• 使用
`npm
install
[任務]
-‐-‐save-‐dev`
命令來安
裝任務
• 撰寫Grunxile.js的內容
• 使用 `grunt
[任務名稱]`
來執行任務
- 32. Grunxile.js的結構
• 最外層程式:
– module.exports
=
funcdon(grunt)
{
…
}
• 任務設定:
– grunt.initConfig()
• 載入任務的npm模組
– grunt.loadNpmTasks(“模組名稱”)
• 註冊任務
– grunt.registerTask(“任務名”,
[“其他任務”,
“其他
任務”])
- 34. 檔案指定的規則
• 大部分的任務設定,都是在處理檔案,所
以一定要知道在Grunxile.js中怎麼指定檔案
• 除了使用檔案及目錄名稱,萬用字元*有特
定的意義:
– 「*」代表目錄下的所有檔案(代表任意數目的
字元,但是不包含「/」)
– 「**」代表目錄下的所有目錄及檔案(代表任
意數目的字元,且包含「/」)
– hEp://gruntjs.com/configuring-‐tasks#globbing-‐
paEerns
- 35. 實際操作
• 安裝Grunt
• 撰寫package.json
• 安裝grunt-‐contrib-‐clean,
grunt-‐contrib-‐copy,
grunt-‐contrib-‐uglify三個任務
• 撰寫Grunxile.js
• 定義build以及preview這兩個任務
• 執行
- 36. 還有很多好康的任務
• grunt-‐contrib-‐cssmin:壓縮CSS檔
• grunt-‐contrib-‐coffee:編譯Coffee
Script檔
• grunt-‐contrib-‐compass:編譯SASS檔案
• grunt-‐contrib-‐watch:監控檔案,有變動時
執行特定任務(ex. 編譯Coffee
Script)
• grunt-‐contrib-‐imagemin:適當地壓縮,最佳
化圖檔
• grunt-‐s3:把檔案放到AWS
S3上
- 37. Grunt的相關資訊
• 網站: hEp://gruntjs.com/
• 查詢任務模組: hEp://gruntjs.com/plugins
• 目前有3390個任務模組
- 40. 以codeigniter為例
• 先透過npm來安裝yeoman:
`npm
install
-‐g
yo`
• 然後安裝generator-‐codeigniter:
`npm
install
-‐g
generator-‐codeigniter
`
• 建立專案目錄,在目錄中執行 `yo
codeigniter`
• 使用npm、bower、composer來安裝相依的
套件
• 執行grunt
build來建構專案
- 44. Gulp的相關資訊
• 網頁: hEp://gulpjs.com/
• 查詢任務模組: hEp://gulpjs.com/plugins/
• 目前有673個任務模組…