網頁開發工具 20140630
Post on 11-Jan-2015
184 Views
Preview:
DESCRIPTION
TRANSCRIPT
網⾴頁開發⼯工具介紹國網中⼼心 網路與資安組 葉永信 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”
top related