網頁開發工具 草稿吧

Transcript

1. 網⾴頁開發⼯工具介紹 國網中⼼心 網路與資安組 葉永信 2014/06/30
2. 網⾴頁開發的歷史 HTML + CGI + JAVASCRIT + Java Applet! ASP/JSP/PHP + Database + Flash! AJAX + XML + ASP.Net/PHP/JSP! HTML5 + CSS3 + WebSocket +javascript
3. 網⾴頁開發編輯器演進
10. 網⾴頁排版技術 ! frame! iframe! table! div + CSS! RWD SinglePage
11. 歷史中的網⾴頁畫⾯面
20. 現今網⾴頁排版
25. 網⾴頁開發⾯面臨了什麼問題 ⾏行動裝置尺⼨寸過多! 開發時期如何測試預覽! 如何寫⼀一次⽤用在多個尺⼨寸上
26. GRUNT! the javascript task runner
27. ⽩白話的說，它就是make
28. 它可以為我們做什麼︖？ 去掉開發時期你加入的註解! 編輯檔案時，讓瀏覽器⾃自動reload! ⾃自動編譯scss成css! ⾃自動將多張⼩小圖合成⼀一張⼤大圖! ⾃自動OOOO
29. GRUNT How to yum install nodejs! npm install -g grunt-cli! 在你的專案⽬目錄下npm install grunt --save-dev
30. 編寫 gruntfile.js module.exports = function(grunt) {! grunt.initConfig({! watch: {! options: { livereload: true },! files: ['*/*.php', '*/*.html', '*/*.js', '*/*.css'],! }! });! grunt.loadNpmTasks('grunt-contrib-watch');! grunt.registerTask('default', ['watch']);! };
31. 在你的專案⽬目錄下執⾏行grunt
32. live demo
33. –Yeh, Yung-Hsin “The end”