Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to integrate front end tool via gruntjs

4,406 views

Published on

Published in: Technology
  • Be the first to comment

How to integrate front end tool via gruntjs

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

×