2013 Taiwain JavaScript Conference: Introduction to GruntJS

How to integrate front end tools via GruntJS

Transcript

1. 你不可不知的前端開發工具 2013 JavaScript Conference 5/18,19
2. 2013 JSDC 2 Who am I Bo-Yi Wu @appleboy http://blog.wu-boy.com https://github.com/appleboy 任職於瑞昱半導體RealTek(IC Design House) - TV 多媒體部門 - Backbone.js, CodeIgniter, Larvel Node.js, MongoDB, Mariadb MySQL, Twitter Bootstrap, Handlebars.js, HAProxy for load balancer, 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.js Node.js 取而代之 取而代之
7. 2013 JSDC 7 Node.js 發行速度快 API 常常更新
8. 2013 JSDC 8 該如何管理 該如何管理 Node.js Node.js 版本
9. 2013 JSDC 9 Node Version Manager: nvm nvm https://github.com/creationix/nvm
10. 2013 JSDC 10 How to use?
11. 2013 JSDC 11 How 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,html JS,CSS,html
13. 2013 JSDC 13 先來看看一般專案首頁 index.html
14. 2013 JSDC 14
15. 2013 JSDC 15 看看 header 載入哪些檔案
16. 2013 JSDC 16 Popular Open Source Normalize.css
17. 2013 JSDC 17 升級套件版本很頭痛
18. 2013 JSDC 18 如果載入了 10 個套件 就必須手動更新 10 次
19. 2013 JSDC 19 引入套件管理程式
20. 2013 JSDC 20 package manager for the web: Bower Bower http://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 26 JavaScript 產生器:CoffeeScript
27. 2013 JSDC 27 為什麼要使用 CoffeeScript
28. 2013 JSDC 28 Why Use CoffeeScript? • 解決 JavaScript Coding Style 問題 – 讓 Javascript 看起來像是同一個人寫的 • 通過 Javascript Lint 測試 – http://www.javascriptlint.com/
29. 2013 JSDC 29 不用再宣告 var 變數 CoffeeScript # Assignment: number = 42 opposite = true JavaScript var number, opposite; number = 42; opposite = true;
30. 2013 JSDC 30 不用再使用任何括號 CoffeeScript # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x JavaScript if (opposite) { number = -42; } square = function(x) { return x * x; };
31. 2013 JSDC 31 coffee -b -w -c -o assets/js assets/coffee
32. 2013 JSDC 32 CSS 產生器 :Compass
33. 2013 JSDC 33 為什麼要使用 compass
34. 2013 JSDC 34 Why Use Compass? • 解決跨瀏覽器 CSS Hack – IE 瀏覽器還是要手動 Hack • 支援 CSS Sprite – 不需要靠 designer 合併圖檔 , 減少 network request • 撰寫 CSS3 非常容易 – Box, Shadow, Border Radius, Text Shadow.. etc • 可自行定義 function, Variable … etc.
35. 2013 JSDC 35 SCSS/SASS 選擇 Scss 跟 CSS 長的一樣 Sass 對於設計師而言很難學
36. 2013 JSDC 36 無痛轉移原有 CSS 架構 Sass-convert -F css -T scss your.css new.css Sass-convert -F css -R css_folder_path
37. 2013 JSDC 37 隨時監控 scss 狀態 compass watch scss_folder_path
38. 2013 JSDC 38 Make CSS3 so Easy
39. 2013 JSDC 39 Border radius SCSS #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 40 Box-shadow SCSS #box-shadow-default { @include single-box-shadow; } CSS #box-shadow-default { -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; }
41. 2013 JSDC 41 Compass Assets 設定 config.rb
42. 2013 JSDC 42 background-image
43. 2013 JSDC 43 config.rb: images path SCSS #logo { backgroung-image: image- url('logo.png'); } CSS http_path = "/" relative_assets = true #logo { backgroung-image: url('../images/logo.png? 1293690212'); }
44. 2013 JSDC 44 config.rb: images path SCSS #logo { backgroung-image: image- url('logo.png'); } CSS http_path = "/" relative_assets = false #logo { backgroung-image: url('/images/logo.png? 1293690212'); }
45. 2013 JSDC 45 inline-image
46. 2013 JSDC 46 config.rb: images path SCSS #logo { backgroung-image: inline- image('logo.png'); } CSS #logo { backgroung-image: url('data:image/png;base64,xx xxxxxxxx'); }
47. 2013 JSDC 47 Image-Sprites Ref: google sprites
48. 2013 JSDC 48 Image-Sprites SCSS @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 49 JavaScritp模組工具:RequireJS
50. 2013 JSDC 50 為什麼要使用 RequireJS
51. 2013 JSDC 51
52. 2013 JSDC 52 網站 include 超多外部套件
53. 2013 JSDC 53 每個套件都有相依性問題
54. 2013 JSDC 54 RequireJS 解決相依性問題
55. 2013 JSDC 55 main.js
56. 2013 JSDC 56 app.js
57. 2013 JSDC 57 <script data-main="js/main" src="js/require.js"></script> 取代全部 javascript tag
58. 2013 JSDC 58 index.html
59. 2013 JSDC 59 RequireJS 只有這樣而已？
60. 2013 JSDC 60 作者另外開發的編譯工具:r.js https://github.com/jrburke/r.js/
61. 2013 JSDC 61 使用前
62. 2013 JSDC 62 使用後 r.js -o build/app.build.js
63. 2013 JSDC 63 前端必備工具 : Livereload http://livereload.com/
64. 2013 JSDC 64 雙螢幕寫程式必備工具
65. 2013 JSDC 65 每天按 Ctrl+F5 至少 100 次 保守估計
66. 2013 JSDC 66 Guardfile 設定檔
67. 2013 JSDC 67 # A sample Guardfile # More info at https://github.com/guard/guard#readme guard 'livereload' do watch(%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 Express http://expressjs.com/
69. 2013 JSDC 69 不需要安裝Apache,Nginx,lighttpd http://expressjs.com/
70. 2013 JSDC 70 var 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 72 Bower, 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 75 build: r.js -o build/app.build.js compass: compass watch . coffee: coffee -b -w -c -o js/ coffeescript/ livereload: guard start all: compass coffee livereload
76. 2013 JSDC 76 好像有好一點？
77. 2013 JSDC 77 但是對 Windows 開發環境 ?
78. 2013 JSDC 78
79. 2013 JSDC 79 What is Fucking Makefile? WTF
80. 2013 JSDC 80 為了解決環境相容問題
81. 2013 JSDC 81 JavaScript Task Runner Grunt.js
82. 2013 JSDC 82 Why Use Grunt.js • Define Task Runner – Initial Project – Deploy Project – Unit Test Project • Designer Don't learning command line • Many Available Grunt plugins – CoffeeScript, Compass, Jade, Require.js – Twitter Bower, JSHint, CSSMin, Livereload
83. 2013 JSDC 83 Grunt 0.4.x requires Node.js version >= 0.8.0. npm uninstall -g grunt npm install -g grunt-cli Grunt 0.4.x requires Node.js version >= 0.8.0.
84. 2013 JSDC 84 How the Grunt CLI works?
85. 2013 JSDC 85 package.json && Gruntfile.js
86. 2013 JSDC 86 package.json npm init建立此檔案 npm install grunt-cli --save-dev npm init建立此檔案
87. 2013 JSDC 87 Gruntfile.js or Gruntfile.coffee grunt.js for 0.3.x versions of Grunt.
88. 2013 JSDC 88 Gruntfile.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 90 The "wrapper" function
91. 2013 JSDC 91 module.exports = function(grunt) { // Do grunt-related things in here };
92. 2013 JSDC 92 Project and task configuration
93. 2013 JSDC 93 grunt.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 94 Loading grunt plugins and tasks
95. 2013 JSDC 95 grunt.loadNpmTasks('grunt-shell');
96. 2013 JSDC 96 Custom tasks
97. 2013 JSDC 97 // Default task(s). grunt.registerTask('default', ['connect', 'watch']); // Deploy task(s). grunt.registerTask('release', ['htmlmin', 'cssmin']);
98. 2013 JSDC 98 Working with an existing grunt project
99. 2013 JSDC 99 An existing grunt project • Change to the project's root directory. • Install project dependencies with npm install. • Run Grunt with grunt.
100. 2013 JSDC 100 用 Grunt 整合今日介紹工具
101. 2013 JSDC 101 package manager: Bower Bower http://bower.io/ https://github.com/yatskevich/grunt-bower-task
102. 2013 JSDC 102 Bower 只會在專案初始化執行
103. 2013 JSDC 103 bower: { install: { options: { cleanup: false, install: true, verbose: true, copy: false } } }
104. 2013 JSDC 104 bower: { cleanup: { options: { cleanup: true, install: false, verbose: true, copy: false } } }
105. 2013 JSDC 105 $ grunt bower:install $ grunt bower:cleanup
106. 2013 JSDC 106 JavaScript 產生器:CoffeeScript https://github.com/gruntjs/grunt-contrib-coffee
107. 2013 JSDC 107 coffee: { 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 109 CSS 產生器 :Compass
110. 2013 JSDC 110 不需要 config.rb 設定檔
111. 2013 JSDC 111 compass: { 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 前端必備工具 : Livereload http://livereload.com/ https://github.com/gruntjs/grunt-contrib-livereload
114. 2013 JSDC 114 Setup Server https://github.com/gruntjs/grunt-contrib-connect
115. 2013 JSDC 115 connect: { livereload: { options: { hostname: '0.0.0.0', port: 3000, base: '.' } } }
116. 2013 JSDC 116 Run tasks whenever watched files change. https://github.com/gruntjs/grunt-contrib-livereload
117. 2013 JSDC 117 regarde: { 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 118 grunt.registerTask('init', ['livereload-start', 'connect', 'regarde']) $ grunt init
119. 2013 JSDC 119
120. 2013 JSDC 120 專案開發環境講完
121. 2013 JSDC 121 Deploy Your Project
122. 2013 JSDC 122 這不是後端工程師該做的嘛？
123. 2013 JSDC 123 很抱歉台灣老闆不是這樣想
124. 2013 JSDC 124 Ref: http://goo.gl/PKIr4
125. 2013 JSDC 125 Before Deploying Project • JavaScript Minify and Combine (requirejs) • CSS Minify (cssmin) • Html Minify (htmlmin) • Remove unnecessary files (clean) • Copy files (copy)
126. 2013 JSDC 126 JavaScript Minify and Combine https://github.com/asciidisco/grunt-requirejs
127. 2013 JSDC 127 requirejs: { 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 129 CSS Minify https://github.com/gruntjs/grunt-contrib-cssmin
130. 2013 JSDC 130 cssmin: { 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 132 Html Minify https://github.com/gruntjs/grunt-contrib-htmlmin
133. 2013 JSDC 133 htmlmin: { options: { removeComments: true, collapseWhitespace: true }, release: { files: { 'public/index.html': 'app/index.html' } } }
134. 2013 JSDC 134 $ grunt htmlmin:release
135. 2013 JSDC 135 Remove unnecessary files https://github.com/gruntjs/grunt-contrib-clean
136. 2013 JSDC 136 clean: { options: { force: true }, release: ['app/assets/coffee', 'app/.sass-cache'] }
137. 2013 JSDC 137 $ grunt clean:release
138. 2013 JSDC 138 Copy files https://github.com/gruntjs/grunt-contrib-copy
139. 2013 JSDC 139 copy: { release: { files: [ { src: 'app/js/main-built.js', dest: 'public/js/20130519.js' } ] } }
140. 2013 JSDC 140 $ grunt copy:release
141. 2013 JSDC 141 今日所有整合都在 Github https://github.com/appleboy/html5-template-engine
142. 2013 JSDC 142 Html5 Template Engine https://github.com/appleboy/html5-template-engine
143. 2013 JSDC 143 Features • 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 147 Backbone.js+Handlebar.js https://github.com/appleboy/backbone-template-engine
148. 2013 JSDC 148 或者你只需要minify html css javascript
149. 2013 JSDC 149 可以參考Shell Script: Minify tool https://github.com/appleboy/minify-tool
150. 2013 JSDC 150 Features • JavaScript compressor: UglifyJS • CSS compressor: Sqwish • Html compressor: htmlcompressor • Optimize images: image_optim
151. 2013 JSDC 151 $ minify (folder|file)_path
152. 2013 JSDC 152 Live Demo
153. 2013 JSDC 153 謝謝大家及工作團隊