以Code igniter為基礎的網頁前端程式設計
10 likes4,991 views
本文件介绍了基于CodeIgniter的前端开发工作，包括前端工程师的职责、面临的挑战以及如何通过使用工具提升工作效率。重点阐述了前端工程师需要掌握的技术、与后端的协作，以及使用Bower、Grunt和Gulp等自动化和包管理工具的好处。最后，文档还涉及了Yeoman作为项目架构生成器的使用方法，以简化项目的建立与管理。
![設定
• 假設規劃靜態檔案都放在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](https://image.slidesharecdn.com/codeigniter-140830220433-phpapp02/85/Code-igniter-13-320.jpg)
![Bower怎麼用
• 先安裝node.js
• 透過`npm
install
–g
bower`來安裝bower
• 套件的預設安裝目錄是bower_components，
可以透過新增設定檔~/.bowerrc來修改預設
值
• 使用
bower
install
[套件名稱]或是[url]來安
裝套件
• 使用bower
init可以在專案目錄中加入
bower.json，專案使用的套件會紀錄在這裡](https://image.slidesharecdn.com/codeigniter-140830220433-phpapp02/85/Code-igniter-24-320.jpg)
![使用grunt
• 在專案根目錄新增Grunxile.js檔案
• 檔案內容是Javascript程式，但是不難理解
• 根據自己的需求，搜尋合適的任務
• 使用
`npm
install
[任務]
-‐-‐save-‐dev`
命令來安
裝任務
• 撰寫Grunxile.js的內容
• 使用 `grunt
[任務名稱]`
來執行任務](https://image.slidesharecdn.com/codeigniter-140830220433-phpapp02/85/Code-igniter-31-320.jpg)
![Grunxile.js的結構
• 最外層程式：
– module.exports
=
funcdon(grunt)
{
…
}
• 任務設定：
– grunt.initConfig()
• 載入任務的npm模組
– grunt.loadNpmTasks(“模組名稱”)
• 註冊任務
– grunt.registerTask(“任務名”,
[“其他任務”,
“其他
任務”])](https://image.slidesharecdn.com/codeigniter-140830220433-phpapp02/85/Code-igniter-32-320.jpg)
以Code igniter為基礎的網頁前端程式設計
- 1. 以CodeIgniter為基礎的網頁前 端程式設計 By Fillano
- 2. 自我介紹 • 渾名：Fillano、費大公 • 本名：馮旭平 • 工作：後端…有時兼前端 • 常用語言：Javascript, PHP, Java, C#, HTML, CSS • 出沒地點：iT邦幫忙、?、G+、plurk、 twiEer…（帳號皆為fillano）
- 3. 講題 • 前端工程師的工作 • 與CodeIgniter合作的前端工作 • 前端工程師的難處 • 讓前端工作更快樂
- 4. 前端工程師的工作
- 5. 前端工程的歷史 • 最早，Web只有前端（WWW: 1990, HTML: 1993） • 經由HTTP傳送內容（0.9: 1991, 1.0: 1996, 1.1: 1997） • 對於動態資料的需求，產生了後端工程 • 對於網頁呈現的需求，產生了前端工程 – Javascript, 1995 – CSS, 1996 – DOM, 1998
- 6. 前端工程師的工作 • AJAX的應用大約在2005開始發展，網頁的 工作越來越複雜，前端工程師這個職務應 運而生 • 主要工作內容範疇(from wiki) – Assessbility：讓網頁可以在更多裝置上正常瀏 覽 – Usability：讓操作介面更好用 – Performance：讓應用程式效能更好
- 7. Accessibility • 需要處理瀏覽器相容性的問題 – Reset – Normalize – Hacks… • 需要處理裝置解析度的問題 – RWD… • 需要能管理日趨複雜的CSS – 架構方法：OOCSS, SMACSS, BEM… – 中介語言：LESS, SASS, COMPASS…
- 8. Usability • UI/UX…各種人機介面設計、用戶體驗方法 與考量 – 視覺效果 – 資訊呈現 – 互動方式
- 9. Performance • 包含從資料由伺服器丟出來之後所有的效 能問題 – 傳送時間 – 瀏覽器呈現資料的速度 – 網頁中的程式執行
- 10. 為了解決這些問題… • 我們會使用許多Javascript Library • 我們會使用Javascript Framework • 我們會使用Bootstrap • 我們會使用最佳化工具 • 我們會使用各種中介語言 – Compile to Javascript – Compile to CSS
- 12. 只要知道靜態檔放哪裡就好了 • CodeIgniter安裝好後，會有幾個目錄跟檔案 – .htaccess – index.php – system – applicadon • 為了管理方便，可以把靜態檔案全部放在 一個目錄，例如assets
- 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
- 15. 前端工程師的難處
- 16. 客戶會直接看到 • 我的經驗 – 客戶常常在Wireframe階段都沒感覺，看到畫面 才開始發揮想像力 – 對細節吹毛求疵 – 需求書通常規範了流程、資料、模組等東西， 對於呈現的部份反而比較模糊
- 17. 常常在工作流程的最後面 • 需求=>設計=>伺服器端程式=>套版=>驗收 • 前面任一階段的延遲，壓力都會在後面爆 發
- 18. 技術瑣碎複雜 • HTML x Javascript x CSS x 瀏覽器版本 • 為了解決一些問題，需要使用更多的工具… 讓需要的技能更複雜了 • 技術的知識，對前端工程師來說是宿命 • 透過工具，還是可以讓工作更順利
- 19. 讓前端工作更快樂
- 20. 還是利用工具 • Bower：套件管理 • Grunt：自動化 • Yeoman：專案架構生成 • Gulp：另一個自動化工具 • 這些工具，都是使用Javascript（node.js）開 發的，對於前端工程師來說，比較沒有進 入障礙
- 21. 套件管理 • 專案常常會使用許多不同的Library及 Framework ，他們各自有版本及相依性，會 造成維護上的困難 • 安裝時，還需要自己到不同的專案網站下 載，會很麻煩 • 利用套件管理工具，只要用一個工具就可 以完成這些工作
- 22. 套件管理正夯 • Java很早就有Maven可以做自動化及套件管 理 • PHP有Composer • Ruby有Gem • Node.js有NPM • 前端的話，有bower
- 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壓縮 – 圖檔最佳化 – 版本管理 • 使用不同的工具，還需要各自下命令，很麻煩
- 28. 自動化工具的好處 • 不用每次都自己下命令 • 可以把不同工作，依照「相依性」組合起 來，批次作業
- 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(“任務名”, [“其他任務”, “其他 任務”])
- 33. Grunt的概念 • 任務皆以「設定」的方式，建立他執行的 規則 • 使用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個任務模組
- 38. 專案架構產生器-‐yeoman • 使用yeoman，可以依照自己對於專案及相 依性的需求，快速建立架構好的專案目錄 及檔案 • 額外的相依性，也可以透過bower在架構產 生後加上去
- 39. 使用情境 • 要使用的軟體、額外的相依套件夠明確， 不必自己花時間拆東西、加東西 • 願意使用別人架構好的專案架構與環境
- 40. 以codeigniter為例 • 先透過npm來安裝yeoman： `npm install -‐g yo` • 然後安裝generator-‐codeigniter： `npm install -‐g generator-‐codeigniter ` • 建立專案目錄，在目錄中執行 `yo codeigniter` • 使用npm、bower、composer來安裝相依的 套件 • 執行grunt build來建構專案
- 41. Yoeman的相關資訊 • 網站： hEp://yeoman.io/ • 尋找合適的產生器： hEp://yeoman.io/generators/
- 42. 最後來看一下Gulp • 他跟grunt一樣，都是專案自動化工具 • 不同點在於： – Grunt使用「設定」的方式來建立任務 – Gulp則使用「寫程式」的方式來建立任務：使 用pipe把任務串接起來 • Grunt支援的任務比較多 • Gulp執行效率會比較好
- 43. 試用一下gulp • 只使用gulp-‐uglify來把stadcs/js/ list_member.js壓成build/assets/js/ list_member.min.js • 程式碼 • 執行結果
- 44. Gulp的相關資訊 • 網頁： hEp://gulpjs.com/ • 查詢任務模組： hEp://gulpjs.com/plugins/ • 目前有673個任務模組…
- 45. 總之 • 能偷懶就盡量偷懶，可以交給機器做的事 情，就不要自己做