Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
網頁開發工具 草稿吧
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
danny
June 05, 2014
88
0
Share
網頁開發工具 草稿吧
danny
June 05, 2014
More Decks by danny
See All by danny
geolocation & html5
danny
0
120
Featured
See All Featured
Exploring anti-patterns in Rails
aemeredith
3
350
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
BBQ
matthewcrist
89
10k
Thoughts on Productivity
jonyablonski
76
5.1k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
540
Optimising Largest Contentful Paint
csswizardry
37
3.7k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
180
GraphQLとの向き合い方2022年版
quramy
50
15k
How to Think Like a Performance Engineer
csswizardry
28
2.6k
The Spectacular Lies of Maps
axbom
PRO
1
730
Building the Perfect Custom Keyboard
takai
2
750
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2k
Transcript
網⾴頁開發⼯工具介紹 國網中⼼心 網路與資安組 葉永信 2014/06/30
網⾴頁開發的歷史 HTML + CGI + JAVASCRIT + Java Applet! ASP/JSP/PHP
+ Database + Flash! AJAX + XML + ASP.Net/PHP/JSP! HTML5 + CSS3 + WebSocket +javascript
網⾴頁開發編輯器演進
None
None
None
None
None
None
網⾴頁排版技術 ! frame! iframe! table! div + CSS! RWD SinglePage
歷史中的網⾴頁畫⾯面
None
None
None
None
None
None
None
None
現今網⾴頁排版
None
None
None
None
網⾴頁開發⾯面臨了什麼問題 ⾏行動裝置尺⼨寸過多! 開發時期如何測試預覽! 如何寫⼀一次⽤用在多個尺⼨寸上
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.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']);! };
在你的專案⽬目錄下執⾏行grunt
live demo
–Yeh, Yung-Hsin “The end”