How to integrate front end tool via gruntjs

KSDG workshop.

Transcript

1. 打造團隊共同開發環境 2013.05.25 KSDG 高雄軟體開發者社群
2. 2013 KSDG 2 Who am I Bo-Yi Wu @appleboy http://blog.wu-boy.com https://github.com/appleboy 任職於瑞昱半導體 RealTek(IC Design House)
3. 2013 KSDG 3 開發團隊 • 前端工程師 – UI, JavaScript, CSS Designer • 後端工程師 – PHP, Ruby, Python Enginner • 測試工程師 – Python, JavaScript Enginner
4. 2013 KSDG 4 工程師都有自己的 Coding Style
5. 2013 KSDG 5 每次要改別人的 程式碼都特別痛苦
6. 2013 KSDG 6 好的專案看起來就 像是同一個人寫的
7. 2013 KSDG 7 統一團隊開發環境 Windows, Linux, Mac
8. 2013 KSDG 8 減少建置環境時間
9. 2013 KSDG 9 前端工具 Html,CSS,JavaScript
10. 2013 KSDG 10 前端工具 CSS
11. 2013 KSDG 11 CSS 產生器 Sass/Scss
12. 2013 KSDG 12 gem install compass
13. 2013 KSDG 13 前端工具 JavaScript
14. 2013 KSDG 14 JavaScript 產生器
15. 2013 KSDG 15 npm install -g coffeescript
16. 2013 KSDG 16 網頁總是會用到很多套件 jQuery,Backbone ...
17. 2013 KSDG 17 外部套件版本控管
18. 2013 KSDG 18 Package Manager Bower Bower http://bower.io/
19. 2013 KSDG 19 npm install -g bower
20. 2013 KSDG 20 前端工具介紹到此
21. 2013 KSDG 21 後端工程師 PHP,Ruby,Python
22. 2013 KSDG 22 PHP Coding Style PHP-FIG PSR-0,1,2 http://www.php-fig.org/
23. 2013 KSDG 23 自動修正 Coding Style PHP-CS-Fixer https://github.com/fabpot/PHP-CS-Fixer
24. 2013 KSDG 24 寫 Server 端不再 是 PHP,Python 程式語言
25. 2013 KSDG 25 JavScript Language Node.js Node.js
26. 2013 KSDG 26 Node.js 發行速度快
27. 2013 KSDG 27 管理 Node.js 版本
28. 2013 KSDG 28 Node Version Manager nvm nvm https://github.com/creationix/nvm
29. 2013 KSDG 29 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
30. 2013 KSDG 30 減少每天按 Ctrl+F5 次數 LiveReload
31. 2013 KSDG 31 整理上述工具 Command
32. 2013 KSDG 32 Bower, Compass ... • bower install • compass watch . • coffee -b -w -c -o js/ coffeescript/ • node build/server.js • guard start
33. 2013 KSDG 33 要記住這麼多 Command 該如何整合成單一指令呢？
34. 2013 KSDG 34 Makefile ？
35. 2013 KSDG 35 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
36. 2013 KSDG 36 Windows 開發環境可以跑嘛 ? WTF
37. 2013 KSDG 37 有沒有更簡單的方法 同時相容多種作業系統 Windows,Linux,Mac
38. 2013 KSDG 38 JavaScript Task Runner GruntJS
39. 2013 KSDG 39 Why Use GruntJS • 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
40. 2013 KSDG 40 How the Grunt CLI works?
41. 2013 KSDG 41 只需要兩個設定檔
42. 2013 KSDG 42 package.json && Gruntfile.js
43. 2013 KSDG 43 package.json npm install grunt-cli --save-dev npm init 建立此檔案
44. 2013 KSDG 44 Gruntfile.js or Gruntfile.coffee grunt.js for 0.3.x versions of Grunt.
45. 2013 KSDG 45 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.
46. 2013 KSDG 46 開始撰寫 Gruntfile.js
47. 2013 KSDG 47 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.
48. 2013 KSDG 48 module.exports = function(grunt) { // Do grunt-related things in here };
49. 2013 KSDG 49 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.
50. 2013 KSDG 50 grunt.initConfig({ pkg: project_config, shell: { bower: { command: 'node node_modules/.bin/bower install', options: { callback: function(err, stdout, stderr, cb) { console.log('Install bower package compeletely.'); return cb(); } } } } });
51. 2013 KSDG 51 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.
52. 2013 KSDG 52 grunt.loadNpmTasks('grunt-shell');
53. 2013 KSDG 53 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.
54. 2013 KSDG 54 // Default task(s). grunt.registerTask('default', ['connect', 'watch']); // Deploy task(s). grunt.registerTask('release', ['htmlmin', 'cssmin']);
55. 2013 KSDG 55 用 Grunt 整合開發工具
56. 2013 KSDG 56 開發專案三步驟 • Initialize Project • Test Project • Deploy Project
57. 2013 KSDG 57 開發專案三步驟 • Initialize Project • Test Project • Deploy Project
58. 2013 KSDG 58 Initialize Project • Bower install • Create server via express. • Livereload • Coffeescript and compass
59. 2013 KSDG 59 Initialize Project • Bower install • Create server via express. • Livereload • Coffeescript and compass
60. 2013 KSDG 60 bower: { install: { options: { cleanup: false, install: true, verbose: true, copy: false } } }
61. 2013 KSDG 61 $ grunt bower:install
62. 2013 KSDG 62 Initialize Project • Bower install • Create server via express • Livereload • Coffeescript and compass
63. 2013 KSDG 63 express: { dev: { options: { script: 'build/server.js' } } }
64. 2013 KSDG 64 $ grunt express:dev
65. 2013 KSDG 65 不想自己寫 server code
66. 2013 KSDG 66 connect: { livereload: { options: { hostname: '0.0.0.0', port: 4000, base: '.' } } }
67. 2013 KSDG 67 $ grunt connect:livereload
68. 2013 KSDG 68 Initialize Project • Bower install • Create server via express. • Livereload • Coffeescript and compass
69. 2013 KSDG 69 livereload: { port: 35729 }
70. 2013 KSDG 70 偵測檔案變化
71. 2013 KSDG 71 regarde: { html: { files: ['app/**/*.{html,htm}'], tasks: ['livereload'] }, css: { files: ['app/**/*.css'], tasks: ['livereload'] }, js: { files: 'app/**/*.js', tasks: ['livereload'] } }
72. 2013 KSDG 72 Initialize Project • Bower install • Create server via express. • Livereload • Coffeescript and compass
73. 2013 KSDG 73 regarde: { scss: { files: ['app/**/*.scss'], tasks: ['compass:dev'] }, coffee: { files: '**/*.coffee', tasks: ['coffee'] } }
74. 2013 KSDG 74 Compass Task
75. 2013 KSDG 75 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' } } }
76. 2013 KSDG 76 Coffee Task
77. 2013 KSDG 77 coffee: { dev: { expand: true, cwd: 'app/assets/coffeescript/', src: ['**/*.coffee'], dest: 'app/assets/js/', ext: '.js', options: { bare: true } } }
78. 2013 KSDG 78 開發專案三步驟 • Initialize Project • Test Project • Deploy Project
79. 2013 KSDG 79 定義 Test 工作
80. 2013 KSDG 80 grunt.registerTask('test', ['release', 'shell:test', 'mocha_phantomjs']);
81. 2013 KSDG 81 $ grunt test
82. 2013 KSDG 82 開發專案三步驟 • Initialize Project • Test Project • Deploy Project
83. 2013 KSDG 83 上線前該做的事
84. 2013 KSDG 84 Before Deploying Project • JavaScript Minify and Combine (requirejs) • CSS Minify (cssmin) • Html Minify (htmlmin) • Remove unnecessary files (clean) • Copy files (copy)
85. 2013 KSDG 85 JavaScript Minify and Combine https://github.com/asciidisco/grunt-requirejs
86. 2013 KSDG 86 requirejs: { release: { options: { appDir: "app/", baseUrl: "assets/js/", dir: "public", name: "main", mainConfigFile: 'app/assets/js/main.js', paths: { jquery: '../vendor/jquery/jquery' } } } }
87. 2013 KSDG 87 $ grunt requirejs:release
88. 2013 KSDG 88 CSS Minify https://github.com/gruntjs/grunt-contrib-cssmin
89. 2013 KSDG 89 cssmin: { release: { report: 'gzip', expand: true, cwd: 'app/assets/css', src: ['*.css'], dest: 'app/assets/css' } }
90. 2013 KSDG 90 $ grunt cssmin:release
91. 2013 KSDG 91 Html Minify https://github.com/gruntjs/grunt-contrib-htmlmin
92. 2013 KSDG 92 htmlmin: { options: { removeComments: true, collapseWhitespace: true }, release: { files: { 'public/index.html': 'app/index.html' } } }
93. 2013 KSDG 93 $ grunt htmlmin:release
94. 2013 KSDG 94 Remove unnecessary files https://github.com/gruntjs/grunt-contrib-clean
95. 2013 KSDG 95 clean: { options: { force: true }, release: ['app/assets/coffee', 'app/.sass-cache'] }
96. 2013 KSDG 96 $ grunt clean:release
97. 2013 KSDG 97 Copy files https://github.com/gruntjs/grunt-contrib-copy
98. 2013 KSDG 98 copy: { release: { files: [ { src: 'app/js/main-built.js', dest: 'public/js/20130519.js' } ] } }
99. 2013 KSDG 99 $ grunt copy:release
100. 2013 KSDG 100 今日所有整合都在 Github https://github.com/appleboy/html5-template-engine
101. 2013 KSDG 101 Html5 Template Engine https://github.com/appleboy/html5-template-engine
102. 2013 KSDG 102 • 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 4000 port • Support JavaScript Task Runner GruntJS • Support JavaScript test framework Mocha
103. 2013 KSDG 103 歡迎 Fork 打造團隊開發環境 https://github.com/appleboy/html5-template-engine
104. 2013 KSDG 104 Live Demo