網⾴頁開發⼯工具介紹國網中⼼心 網路與資安組 葉永信 2014/06/30

網⾴頁開發的歷史

HTML + CGI + JAVASCRIT + Java Applet!

ASP/JSP/PHP + Database + Flash!

AJAX + XML + ASP.Net/PHP/JSP!

HTML5 + CSS3 + WebSocket +javascript

網⾴頁開發編輯器演進

網⾴頁排版技術

!

frame!

iframe!

table!

div + CSS!

RWD SinglePage

歷史中的網⾴頁畫⾯面

現今網⾴頁排版

網⾴頁開發⾯面臨了什麼問題

⾏行動裝置尺⼨寸過多!

開發時期如何測試預覽!

如何寫⼀一次⽤用在多個尺⼨寸上

GRUNT!the javascript task runner

⽩白話的說，它就是make

它可以為我們做什麼︖？

去掉開發時期你加入的註解!

編輯檔案時，讓瀏覽器⾃自動reload!

⾃自動編譯scss成css!

⾃自動將多張⼩小圖合成⼀一張⼤大圖!

⾃自動OOOO

GRUNT How to

yum install nodejs!

npm install -g grunt-cli!

在你的專案⽬目錄下npm install grunt --save-dev

編寫 gruntfile.jsmodule.exports = function(grunt) {!

grunt.initConfig({!

watch: {!

options: { livereload: true },!

files: ['*/*.php', '*/*.html', '*/*.js', '*/*.css'],!

}!

});!

grunt.loadNpmTasks('grunt-contrib-watch');!

grunt.registerTask('default', ['watch']);!

};

在你的專案⽬目錄下執⾏行grunt

live demo

–Yeh, Yung-Hsin

“The end”