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

Introduction to Grunt.js on Taiwan JavaScript Conference

35,870
-1

Published on

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
124 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
35,870
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
357
Comments
0
Likes
124
Embeds 0
No embeds

No notes for slide

Introduction to Grunt.js on Taiwan JavaScript Conference

  1. 1. 你不可不知的前端開發工具2013 JavaScript Conference 5/18,19
  2. 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. 3. 2013 JSDC 3工欲善其事 , 必先利其器
  4. 4. 2013 JSDC 4昨天 UP Chen 講了七的工具
  5. 5. 2013 JSDC 5今天來聊聊程式相關套件工具
  6. 6. 2013 JSDC 6寫後端程式不再是PHP,Ruby,Pyhton.. 等專屬我們可以用我們可以用 Node.jsNode.js 取而代之取而代之
  7. 7. 2013 JSDC 7Node.js 發行速度快 API 常常更新
  8. 8. 2013 JSDC 8該如何管理該如何管理 Node.jsNode.js 版本
  9. 9. 2013 JSDC 9Node Version Manager: nvmnvmhttps://github.com/creationix/nvm
  10. 10. 2013 JSDC 10How to use?
  11. 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. 12. 2013 JSDC 12前端工程師會接觸到JS,CSS,htmlJS,CSS,html
  13. 13. 2013 JSDC 13先來看看一般專案首頁index.html
  14. 14. 2013 JSDC 14
  15. 15. 2013 JSDC 15看看 header 載入哪些檔案
  16. 16. 2013 JSDC 16Popular Open SourceNormalize.css
  17. 17. 2013 JSDC 17升級套件版本很頭痛
  18. 18. 2013 JSDC 18如果載入了 10 個套件就必須手動更新 10 次
  19. 19. 2013 JSDC 19引入套件管理程式
  20. 20. 2013 JSDC 20package manager for the web: BowerBowerhttp://bower.io/
  21. 21. 2013 JSDC 21定義下載路徑設定: .bowerrc
  22. 22. 2013 JSDC 22{directory: assets/vendor,json: component.json}
  23. 23. 2013 JSDC 23定義專案套件需求: component.json$ bower install <pkg>#<version>
  24. 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. 25. 2013 JSDC 25以後不必擔心套件版本問題
  26. 26. 2013 JSDC 26JavaScript 產生器:CoffeeScript
  27. 27. 2013 JSDC 27為什麼要使用 CoffeeScript
  28. 28. 2013 JSDC 28Why Use CoffeeScript?●解決 JavaScript Coding Style 問題– 讓 Javascript 看起來像是同一個人寫的●通過 Javascript Lint 測試– http://www.javascriptlint.com/
  29. 29. 2013 JSDC 29不用再宣告 var 變數CoffeeScript# Assignment:number = 42opposite = trueJavaScriptvar number, opposite;number = 42;opposite = true;
  30. 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. 31. 2013 JSDC 31coffee -b -w -c -o assets/js assets/coffee
  32. 32. 2013 JSDC 32CSS 產生器 :Compass
  33. 33. 2013 JSDC 33為什麼要使用 compass
  34. 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. 35. 2013 JSDC 35SCSS/SASS 選擇Scss 跟 CSS 長的一樣Sass 對於設計師而言很難學
  36. 36. 2013 JSDC 36無痛轉移原有 CSS 架構Sass-convert -F css -T scss your.css new.cssSass-convert -F css -R css_folder_path
  37. 37. 2013 JSDC 37隨時監控 scss 狀態compass watch scss_folder_path
  38. 38. 2013 JSDC 38Make CSS3 so Easy
  39. 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. 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. 41. 2013 JSDC 41Compass Assets 設定config.rb
  42. 42. 2013 JSDC 42background-image
  43. 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. 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. 45. 2013 JSDC 45inline-image
  46. 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. 47. 2013 JSDC 47Image-SpritesRef: google sprites
  48. 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. 49. 2013 JSDC 49JavaScritp模組工具:RequireJS
  50. 50. 2013 JSDC 50為什麼要使用 RequireJS
  51. 51. 2013 JSDC 51
  52. 52. 2013 JSDC 52網站 include 超多外部套件
  53. 53. 2013 JSDC 53每個套件都有相依性問題
  54. 54. 2013 JSDC 54RequireJS 解決相依性問題
  55. 55. 2013 JSDC 55main.js
  56. 56. 2013 JSDC 56app.js
  57. 57. 2013 JSDC 57<script data-main="js/main" src="js/require.js"></script>取代全部 javascript tag
  58. 58. 2013 JSDC 58index.html
  59. 59. 2013 JSDC 59RequireJS 只有這樣而已?
  60. 60. 2013 JSDC 60作者另外開發的編譯工具:r.jshttps://github.com/jrburke/r.js/
  61. 61. 2013 JSDC 61使用前
  62. 62. 2013 JSDC 62使用後r.js -o build/app.build.js
  63. 63. 2013 JSDC 63前端必備工具 : Livereloadhttp://livereload.com/
  64. 64. 2013 JSDC 64雙螢幕寫程式必備工具
  65. 65. 2013 JSDC 65每天按 Ctrl+F5 至少 100 次保守估計
  66. 66. 2013 JSDC 66Guardfile 設定檔
  67. 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. 68. 2013 JSDC 68簡易Web Server: Node Expresshttp://expressjs.com/
  69. 69. 2013 JSDC 69不需要安裝Apache,Nginx,lighttpdhttp://expressjs.com/
  70. 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. 71. 2013 JSDC 71上述工具重點整理
  72. 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. 73. 2013 JSDC 73指令有點多有點雜
  74. 74. 2013 JSDC 74寫成 Makefile 執行
  75. 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. 76. 2013 JSDC 76好像有好一點?
  77. 77. 2013 JSDC 77但是對 Windows 開發環境 ?
  78. 78. 2013 JSDC 78
  79. 79. 2013 JSDC 79What is Fucking Makefile?WTF
  80. 80. 2013 JSDC 80為了解決環境相容問題
  81. 81. 2013 JSDC 81JavaScript Task RunnerGrunt.js
  82. 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. 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. 84. 2013 JSDC 84How the Grunt CLI works?
  85. 85. 2013 JSDC 85package.json && Gruntfile.js
  86. 86. 2013 JSDC 86package.jsonnpm init建立此檔案npm install grunt-cli --save-devnpm init建立此檔案
  87. 87. 2013 JSDC 87Gruntfile.js or Gruntfile.coffeegrunt.js for 0.3.x versions of Grunt.
  88. 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. 89. 2013 JSDC 89開始撰寫 Gruntfile.js
  90. 90. 2013 JSDC 90The "wrapper" function
  91. 91. 2013 JSDC 91module.exports = function(grunt) {// Do grunt-related things in here};
  92. 92. 2013 JSDC 92Project and task configuration
  93. 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. 94. 2013 JSDC 94Loading grunt plugins and tasks
  95. 95. 2013 JSDC 95grunt.loadNpmTasks(grunt-shell);
  96. 96. 2013 JSDC 96Custom tasks
  97. 97. 2013 JSDC 97// Default task(s).grunt.registerTask(default, [connect, watch]);// Deploy task(s).grunt.registerTask(release, [htmlmin, cssmin]);
  98. 98. 2013 JSDC 98Working with an existing grunt project
  99. 99. 2013 JSDC 99An existing grunt project●Change to the projects root directory.●Install project dependencies with npminstall.●Run Grunt with grunt.
  100. 100. 2013 JSDC 100用 Grunt 整合今日介紹工具
  101. 101. 2013 JSDC 101package manager: BowerBowerhttp://bower.io/https://github.com/yatskevich/grunt-bower-task
  102. 102. 2013 JSDC 102Bower 只會在專案初始化執行
  103. 103. 2013 JSDC 103bower: {install: {options: {cleanup: false,install: true,verbose: true,copy: false}}}
  104. 104. 2013 JSDC 104bower: {cleanup: {options: {cleanup: true,install: false,verbose: true,copy: false}}}
  105. 105. 2013 JSDC 105$ grunt bower:install$ grunt bower:cleanup
  106. 106. 2013 JSDC 106JavaScript 產生器:CoffeeScripthttps://github.com/gruntjs/grunt-contrib-coffee
  107. 107. 2013 JSDC 107coffee: {dev: {expand: true,cwd: app/assets/coffee/,src: [**/*.coffee],dest: app/assets/js/,ext: .js,options: {bare: true}}}
  108. 108. 2013 JSDC 108$ grunt coffee:dev
  109. 109. 2013 JSDC 109CSS 產生器 :Compass
  110. 110. 2013 JSDC 110不需要 config.rb 設定檔
  111. 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. 112. 2013 JSDC 112$grunt compass:dev
  113. 113. 2013 JSDC 113前端必備工具 : Livereloadhttp://livereload.com/https://github.com/gruntjs/grunt-contrib-livereload
  114. 114. 2013 JSDC 114Setup Serverhttps://github.com/gruntjs/grunt-contrib-connect
  115. 115. 2013 JSDC 115connect: {livereload: {options: {hostname: 0.0.0.0,port: 3000,base: .}}}
  116. 116. 2013 JSDC 116Run tasks whenever watched files change.https://github.com/gruntjs/grunt-contrib-livereload
  117. 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. 118. 2013 JSDC 118grunt.registerTask(init, [livereload-start, connect, regarde])$ grunt init
  119. 119. 2013 JSDC 119
  120. 120. 2013 JSDC 120專案開發環境講完
  121. 121. 2013 JSDC 121Deploy Your Project
  122. 122. 2013 JSDC 122這不是後端工程師該做的嘛?
  123. 123. 2013 JSDC 123很抱歉台灣老闆不是這樣想
  124. 124. 2013 JSDC 124Ref: http://goo.gl/PKIr4
  125. 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. 126. 2013 JSDC 126JavaScript Minify and Combinehttps://github.com/asciidisco/grunt-requirejs
  127. 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. 128. 2013 JSDC 128$ grunt requirejs:release
  129. 129. 2013 JSDC 129CSS Minifyhttps://github.com/gruntjs/grunt-contrib-cssmin
  130. 130. 2013 JSDC 130cssmin: {release: {report: gzip,expand: true,cwd: app/assets/css,src: [*.css],dest: app/assets/css}}
  131. 131. 2013 JSDC 131$ grunt cssmin:release
  132. 132. 2013 JSDC 132Html Minifyhttps://github.com/gruntjs/grunt-contrib-htmlmin
  133. 133. 2013 JSDC 133htmlmin: {options: {removeComments: true,collapseWhitespace: true},release: {files: {public/index.html: app/index.html}}}
  134. 134. 2013 JSDC 134$ grunt htmlmin:release
  135. 135. 2013 JSDC 135Remove unnecessary fileshttps://github.com/gruntjs/grunt-contrib-clean
  136. 136. 2013 JSDC 136clean: {options: {force: true},release: [app/assets/coffee,app/.sass-cache]}
  137. 137. 2013 JSDC 137$ grunt clean:release
  138. 138. 2013 JSDC 138Copy fileshttps://github.com/gruntjs/grunt-contrib-copy
  139. 139. 2013 JSDC 139copy: {release: {files: [{src: app/js/main-built.js,dest: public/js/20130519.js}]}}
  140. 140. 2013 JSDC 140$ grunt copy:release
  141. 141. 2013 JSDC 141今日所有整合都在 Githubhttps://github.com/appleboy/html5-template-engine
  142. 142. 2013 JSDC 142Html5 Template Enginehttps://github.com/appleboy/html5-template-engine
  143. 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. 144. 2013 JSDC 144歡迎Fork 打造自己的開發環境https://github.com/appleboy/html5-template-engine
  145. 145. 2013 JSDC 145另外有 Backbone 開發環境https://github.com/appleboy/backbone-template-engine
  146. 146. 2013 JSDC 146兩個 Repository 差異在哪?https://github.com/appleboy/backbone-template-engine
  147. 147. 2013 JSDC 147Backbone.js+Handlebar.jshttps://github.com/appleboy/backbone-template-engine
  148. 148. 2013 JSDC 148或者你只需要minify html css javascript
  149. 149. 2013 JSDC 149可以參考Shell Script: Minify toolhttps://github.com/appleboy/minify-tool
  150. 150. 2013 JSDC 150Features●JavaScript compressor: UglifyJS●CSS compressor: Sqwish●Html compressor: htmlcompressor●Optimize images: image_optim
  151. 151. 2013 JSDC 151$ minify (folder|file)_path
  152. 152. 2013 JSDC 152Live Demo
  153. 153. 2013 JSDC 153謝謝大家及工作團隊
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×