Your SlideShare is downloading. ×
Introduction to Grunt.js on Taiwan JavaScript Conference
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Grunt.js on Taiwan JavaScript Conference

18,970
views

Published on

Blog: …

Blog:
http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/

高雄 KSDG 分享: 打造團隊共同開發環境
http://blog.wu-boy.com/2013/05/how-to-integrate-front-end-tools-via-gruntjs/

Published in: Technology

0 Comments
110 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,970
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
332
Comments
0
Likes
110
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 你不可不知的前端開發工具2013 JavaScript Conference 5/18,19
  • 2. 2013 JSDC 2Who am IBo-Yi Wu@appleboyhttp://blog.wu-boy.comhttps://github.com/appleboy任職於瑞昱半導體RealTek(IC Design House)- TV 多媒體部門- Backbone.js, CodeIgniter, Larvel Node.js, MongoDB, MariadbMySQL, Twitter Bootstrap, Handlebars.js, HAProxy for loadbalancer, Galera Cluster for MySQL ...
  • 3. 2013 JSDC 3工欲善其事 , 必先利其器
  • 4. 2013 JSDC 4昨天 UP Chen 講了七的工具
  • 5. 2013 JSDC 5今天來聊聊程式相關套件工具
  • 6. 2013 JSDC 6寫後端程式不再是PHP,Ruby,Pyhton.. 等專屬我們可以用我們可以用 Node.jsNode.js 取而代之取而代之
  • 7. 2013 JSDC 7Node.js 發行速度快 API 常常更新
  • 8. 2013 JSDC 8該如何管理該如何管理 Node.jsNode.js 版本
  • 9. 2013 JSDC 9Node Version Manager: nvmnvmhttps://github.com/creationix/nvm
  • 10. 2013 JSDC 10How to use?
  • 11. 2013 JSDC 11How to use●nvm install 0.10.5●nvm ls●nvm ls-remote●nvm use 0.10.5●nvm install stable (support from my github)●nvm install latest (support from my github)https://github.com/appleboy/nvm
  • 12. 2013 JSDC 12前端工程師會接觸到JS,CSS,htmlJS,CSS,html
  • 13. 2013 JSDC 13先來看看一般專案首頁index.html
  • 14. 2013 JSDC 14
  • 15. 2013 JSDC 15看看 header 載入哪些檔案
  • 16. 2013 JSDC 16Popular Open SourceNormalize.css
  • 17. 2013 JSDC 17升級套件版本很頭痛
  • 18. 2013 JSDC 18如果載入了 10 個套件就必須手動更新 10 次
  • 19. 2013 JSDC 19引入套件管理程式
  • 20. 2013 JSDC 20package manager for the web: BowerBowerhttp://bower.io/
  • 21. 2013 JSDC 21定義下載路徑設定: .bowerrc
  • 22. 2013 JSDC 22{directory: assets/vendor,json: component.json}
  • 23. 2013 JSDC 23定義專案套件需求: component.json$ bower install <pkg>#<version>
  • 24. 2013 JSDC 24{"name": "html5-template-engine","version": "1.0.0","dependencies": {"jquery": "~1.9.1","normalize-scss": "~2.1.1","modernizr": "~2.6.2","requirejs": "~2.1.5"}}
  • 25. 2013 JSDC 25以後不必擔心套件版本問題
  • 26. 2013 JSDC 26JavaScript 產生器:CoffeeScript
  • 27. 2013 JSDC 27為什麼要使用 CoffeeScript
  • 28. 2013 JSDC 28Why Use CoffeeScript?●解決 JavaScript Coding Style 問題– 讓 Javascript 看起來像是同一個人寫的●通過 Javascript Lint 測試– http://www.javascriptlint.com/
  • 29. 2013 JSDC 29不用再宣告 var 變數CoffeeScript# Assignment:number = 42opposite = trueJavaScriptvar number, opposite;number = 42;opposite = true;
  • 30. 2013 JSDC 30不用再使用任何括號CoffeeScript# Conditions:number = -42 if opposite# Functions:square = (x) -> x * xJavaScriptif (opposite) {number = -42;}square = function(x) {return x * x;};
  • 31. 2013 JSDC 31coffee -b -w -c -o assets/js assets/coffee
  • 32. 2013 JSDC 32CSS 產生器 :Compass
  • 33. 2013 JSDC 33為什麼要使用 compass
  • 34. 2013 JSDC 34Why Use Compass?●解決跨瀏覽器 CSS Hack– IE 瀏覽器還是要手動 Hack●支援 CSS Sprite– 不需要靠 designer 合併圖檔 , 減少 networkrequest●撰寫 CSS3 非常容易– Box, Shadow, Border Radius, Text Shadow.. etc●可自行定義 function, Variable … etc.
  • 35. 2013 JSDC 35SCSS/SASS 選擇Scss 跟 CSS 長的一樣Sass 對於設計師而言很難學
  • 36. 2013 JSDC 36無痛轉移原有 CSS 架構Sass-convert -F css -T scss your.css new.cssSass-convert -F css -R css_folder_path
  • 37. 2013 JSDC 37隨時監控 scss 狀態compass watch scss_folder_path
  • 38. 2013 JSDC 38Make CSS3 so Easy
  • 39. 2013 JSDC 39Border radiusSCSS#border-radius {@include border-radius(25px);}CSS#border-radius {-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;}
  • 40. 2013 JSDC 40Box-shadowSCSS#box-shadow-default {@include single-box-shadow;}CSS#box-shadow-default {-webkit-box-shadow: 0px0px 5px #333333;-moz-box-shadow: 0px 0px5px #333333;box-shadow: 0px 0px 5px#333333;}
  • 41. 2013 JSDC 41Compass Assets 設定config.rb
  • 42. 2013 JSDC 42background-image
  • 43. 2013 JSDC 43config.rb: images pathSCSS#logo {backgroung-image: image-url(logo.png);}CSShttp_path = "/"relative_assets = true#logo {backgroung-image:url(../images/logo.png?1293690212);}
  • 44. 2013 JSDC 44config.rb: images pathSCSS#logo {backgroung-image: image-url(logo.png);}CSShttp_path = "/"relative_assets = false#logo {backgroung-image:url(/images/logo.png?1293690212);}
  • 45. 2013 JSDC 45inline-image
  • 46. 2013 JSDC 46config.rb: images pathSCSS#logo {backgroung-image: inline-image(logo.png);}CSS#logo {backgroung-image:url(data:image/png;base64,xxxxxxxxxx);}
  • 47. 2013 JSDC 47Image-SpritesRef: google sprites
  • 48. 2013 JSDC 48Image-SpritesSCSS@import "my-icons/*.png";@include all-my-icons-sprites;CSS.my-icons-sprite,my-icons-edit, .my-icons-save{ background: url(/images/my-icons-s34fe0604ab.png) no-repeat; }.my-icons-edit { background-position: 0 0; }.my-icons-save { background-position: 0 -32px; }
  • 49. 2013 JSDC 49JavaScritp模組工具:RequireJS
  • 50. 2013 JSDC 50為什麼要使用 RequireJS
  • 51. 2013 JSDC 51
  • 52. 2013 JSDC 52網站 include 超多外部套件
  • 53. 2013 JSDC 53每個套件都有相依性問題
  • 54. 2013 JSDC 54RequireJS 解決相依性問題
  • 55. 2013 JSDC 55main.js
  • 56. 2013 JSDC 56app.js
  • 57. 2013 JSDC 57<script data-main="js/main" src="js/require.js"></script>取代全部 javascript tag
  • 58. 2013 JSDC 58index.html
  • 59. 2013 JSDC 59RequireJS 只有這樣而已?
  • 60. 2013 JSDC 60作者另外開發的編譯工具:r.jshttps://github.com/jrburke/r.js/
  • 61. 2013 JSDC 61使用前
  • 62. 2013 JSDC 62使用後r.js -o build/app.build.js
  • 63. 2013 JSDC 63前端必備工具 : Livereloadhttp://livereload.com/
  • 64. 2013 JSDC 64雙螢幕寫程式必備工具
  • 65. 2013 JSDC 65每天按 Ctrl+F5 至少 100 次保守估計
  • 66. 2013 JSDC 66Guardfile 設定檔
  • 67. 2013 JSDC 67# A sample Guardfile# More info athttps://github.com/guard/guard#readmeguard livereload dowatch(%r{app/.+.(html|htm)$})watch(%r{app/assets/css/.+.css})watch(%r{app/assets/js/.+.js})watch(%r{app/assets/templates/.+.handlebars})end
  • 68. 2013 JSDC 68簡易Web Server: Node Expresshttp://expressjs.com/
  • 69. 2013 JSDC 69不需要安裝Apache,Nginx,lighttpdhttp://expressjs.com/
  • 70. 2013 JSDC 70var app, express, fs, port;fs = require(fs);express = require(express);app = express();port = 4000;app.use(express["static"](__dirname + /));app.use(express.directory(__dirname + /));app.use(express.errorHandler());app.use(function(req, res, next) {console.log(%s %s, req.method, req.url);return next();});app.use(app.router);app.listen(port);console.log(Server listening on http://localhost: + port);
  • 71. 2013 JSDC 71上述工具重點整理
  • 72. 2013 JSDC 72Bower, Compass ...●bower install●compass watch .●coffee -b -w -c -o js/ coffeescript/●r.js -o build/app.build.js●node build/server.js●guard start
  • 73. 2013 JSDC 73指令有點多有點雜
  • 74. 2013 JSDC 74寫成 Makefile 執行
  • 75. 2013 JSDC 75build:r.js -o build/app.build.jscompass:compass watch .coffee:coffee -b -w -c -o js/ coffeescript/livereload:guard startall: compass coffee livereload
  • 76. 2013 JSDC 76好像有好一點?
  • 77. 2013 JSDC 77但是對 Windows 開發環境 ?
  • 78. 2013 JSDC 78
  • 79. 2013 JSDC 79What is Fucking Makefile?WTF
  • 80. 2013 JSDC 80為了解決環境相容問題
  • 81. 2013 JSDC 81JavaScript Task RunnerGrunt.js
  • 82. 2013 JSDC 82Why Use Grunt.js●Define Task Runner– Initial Project– Deploy Project– Unit Test Project●Designer Dont learning command line●Many Available Grunt plugins– CoffeeScript, Compass, Jade, Require.js– Twitter Bower, JSHint, CSSMin, Livereload
  • 83. 2013 JSDC 83Grunt 0.4.x requires Node.js version >= 0.8.0.npm uninstall -g gruntnpm install -g grunt-cliGrunt 0.4.x requires Node.js version >= 0.8.0.
  • 84. 2013 JSDC 84How the Grunt CLI works?
  • 85. 2013 JSDC 85package.json && Gruntfile.js
  • 86. 2013 JSDC 86package.jsonnpm init建立此檔案npm install grunt-cli --save-devnpm init建立此檔案
  • 87. 2013 JSDC 87Gruntfile.js or Gruntfile.coffeegrunt.js for 0.3.x versions of Grunt.
  • 88. 2013 JSDC 88Gruntfile.js 包含底下項目●The "wrapper" function●Project and task configuration– compass, require.js, bower, shell …. etc.●Loading grunt plugins and tasks●Custom tasks– Deploy, Clean, Build project … etc.
  • 89. 2013 JSDC 89開始撰寫 Gruntfile.js
  • 90. 2013 JSDC 90The "wrapper" function
  • 91. 2013 JSDC 91module.exports = function(grunt) {// Do grunt-related things in here};
  • 92. 2013 JSDC 92Project and task configuration
  • 93. 2013 JSDC 93grunt.initConfig({pkg: project_config,shell: {bower: {command: node node_modules/.bin/bower install,options: {stdout: true,stderr: true,callback: function(err, stdout, stderr, cb) {console.log(Install bower package compeletely.);return cb();}}}}});
  • 94. 2013 JSDC 94Loading grunt plugins and tasks
  • 95. 2013 JSDC 95grunt.loadNpmTasks(grunt-shell);
  • 96. 2013 JSDC 96Custom tasks
  • 97. 2013 JSDC 97// Default task(s).grunt.registerTask(default, [connect, watch]);// Deploy task(s).grunt.registerTask(release, [htmlmin, cssmin]);
  • 98. 2013 JSDC 98Working with an existing grunt project
  • 99. 2013 JSDC 99An existing grunt project●Change to the projects root directory.●Install project dependencies with npminstall.●Run Grunt with grunt.
  • 100. 2013 JSDC 100用 Grunt 整合今日介紹工具
  • 101. 2013 JSDC 101package manager: BowerBowerhttp://bower.io/https://github.com/yatskevich/grunt-bower-task
  • 102. 2013 JSDC 102Bower 只會在專案初始化執行
  • 103. 2013 JSDC 103bower: {install: {options: {cleanup: false,install: true,verbose: true,copy: false}}}
  • 104. 2013 JSDC 104bower: {cleanup: {options: {cleanup: true,install: false,verbose: true,copy: false}}}
  • 105. 2013 JSDC 105$ grunt bower:install$ grunt bower:cleanup
  • 106. 2013 JSDC 106JavaScript 產生器:CoffeeScripthttps://github.com/gruntjs/grunt-contrib-coffee
  • 107. 2013 JSDC 107coffee: {dev: {expand: true,cwd: app/assets/coffee/,src: [**/*.coffee],dest: app/assets/js/,ext: .js,options: {bare: true}}}
  • 108. 2013 JSDC 108$ grunt coffee:dev
  • 109. 2013 JSDC 109CSS 產生器 :Compass
  • 110. 2013 JSDC 110不需要 config.rb 設定檔
  • 111. 2013 JSDC 111compass: {dev: {options: {sassDir: app/assets/sass,cssDir: app/assets/css,imagesDir: app/assets/images,javascriptsDir: app/assets/js,outputStyle: nested,relativeAssets: true,noLineComments: true,environment: development}}}
  • 112. 2013 JSDC 112$grunt compass:dev
  • 113. 2013 JSDC 113前端必備工具 : Livereloadhttp://livereload.com/https://github.com/gruntjs/grunt-contrib-livereload
  • 114. 2013 JSDC 114Setup Serverhttps://github.com/gruntjs/grunt-contrib-connect
  • 115. 2013 JSDC 115connect: {livereload: {options: {hostname: 0.0.0.0,port: 3000,base: .}}}
  • 116. 2013 JSDC 116Run tasks whenever watched files change.https://github.com/gruntjs/grunt-contrib-livereload
  • 117. 2013 JSDC 117regarde: {html: {files: [app/**/*.{html,htm}],tasks: [livereload]},scss: {files: [app/**/*.scss],tasks: [compass:dev]},css: {files: [app/**/*.css],tasks: [livereload]},js: {files: app/**/*.js,tasks: [livereload]},coffee: {files: **/*.coffee,tasks: [coffee]}}
  • 118. 2013 JSDC 118grunt.registerTask(init, [livereload-start, connect, regarde])$ grunt init
  • 119. 2013 JSDC 119
  • 120. 2013 JSDC 120專案開發環境講完
  • 121. 2013 JSDC 121Deploy Your Project
  • 122. 2013 JSDC 122這不是後端工程師該做的嘛?
  • 123. 2013 JSDC 123很抱歉台灣老闆不是這樣想
  • 124. 2013 JSDC 124Ref: http://goo.gl/PKIr4
  • 125. 2013 JSDC 125Before Deploying Project●JavaScript Minify and Combine (requirejs)●CSS Minify (cssmin)●Html Minify (htmlmin)●Remove unnecessary files (clean)●Copy files (copy)
  • 126. 2013 JSDC 126JavaScript Minify and Combinehttps://github.com/asciidisco/grunt-requirejs
  • 127. 2013 JSDC 127requirejs: {  release: {    options: {      appDir: "app/",      baseUrl: "assets/js/",      dir: "public",      name: "main",      mainConfigFile: app/assets/js/main.js,      preserveLicenseComments: false,      fileExclusionRegExp: /^(.|node_modules)/,      paths: {        jquery: ../vendor/jquery/jquery      }    }  }}
  • 128. 2013 JSDC 128$ grunt requirejs:release
  • 129. 2013 JSDC 129CSS Minifyhttps://github.com/gruntjs/grunt-contrib-cssmin
  • 130. 2013 JSDC 130cssmin: {release: {report: gzip,expand: true,cwd: app/assets/css,src: [*.css],dest: app/assets/css}}
  • 131. 2013 JSDC 131$ grunt cssmin:release
  • 132. 2013 JSDC 132Html Minifyhttps://github.com/gruntjs/grunt-contrib-htmlmin
  • 133. 2013 JSDC 133htmlmin: {options: {removeComments: true,collapseWhitespace: true},release: {files: {public/index.html: app/index.html}}}
  • 134. 2013 JSDC 134$ grunt htmlmin:release
  • 135. 2013 JSDC 135Remove unnecessary fileshttps://github.com/gruntjs/grunt-contrib-clean
  • 136. 2013 JSDC 136clean: {options: {force: true},release: [app/assets/coffee,app/.sass-cache]}
  • 137. 2013 JSDC 137$ grunt clean:release
  • 138. 2013 JSDC 138Copy fileshttps://github.com/gruntjs/grunt-contrib-copy
  • 139. 2013 JSDC 139copy: {release: {files: [{src: app/js/main-built.js,dest: public/js/20130519.js}]}}
  • 140. 2013 JSDC 140$ grunt copy:release
  • 141. 2013 JSDC 141今日所有整合都在 Githubhttps://github.com/appleboy/html5-template-engine
  • 142. 2013 JSDC 142Html5 Template Enginehttps://github.com/appleboy/html5-template-engine
  • 143. 2013 JSDC 143Features●The latest html5boilerplate.com source code●Includes Normalize.scss v2.1.x and v1.1.x.●The latest jQuery and Modernizr.●Support CoffeeScript, RequireJS, Compass●A lightweight web server listen to 3000 port●Support JavaScript Task Runner GruntJS●Support JavaScript test framework Mocha
  • 144. 2013 JSDC 144歡迎Fork 打造自己的開發環境https://github.com/appleboy/html5-template-engine
  • 145. 2013 JSDC 145另外有 Backbone 開發環境https://github.com/appleboy/backbone-template-engine
  • 146. 2013 JSDC 146兩個 Repository 差異在哪?https://github.com/appleboy/backbone-template-engine
  • 147. 2013 JSDC 147Backbone.js+Handlebar.jshttps://github.com/appleboy/backbone-template-engine
  • 148. 2013 JSDC 148或者你只需要minify html css javascript
  • 149. 2013 JSDC 149可以參考Shell Script: Minify toolhttps://github.com/appleboy/minify-tool
  • 150. 2013 JSDC 150Features●JavaScript compressor: UglifyJS●CSS compressor: Sqwish●Html compressor: htmlcompressor●Optimize images: image_optim
  • 151. 2013 JSDC 151$ minify (folder|file)_path
  • 152. 2013 JSDC 152Live Demo
  • 153. 2013 JSDC 153謝謝大家及工作團隊