How to integrate front end tool via gruntjs
10 likes4,767 views
This document discusses setting up a shared development environment for a team. It recommends using GruntJS, a JavaScript task runner, to integrate common development tools like Bower, Compass, CoffeeScript, and livereload across Windows, Linux and Mac operating systems. The document outlines initializing a project with these tools, testing it, and deploying it with tasks for minification, concatenation, cleaning files and copying to production. It provides configuration examples for Gruntfile.js and links to a GitHub repository with an integrated HTML5 template project using these tools.
![2013 KSDG 54
// Default task(s).
grunt.registerTask('default', ['connect', 'watch']);
// Deploy task(s).
grunt.registerTask('release', ['htmlmin', 'cssmin']);](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-54-320.jpg)
![2013 KSDG 71
regarde: {
html: {
files: ['app/**/*.{html,htm}'],
tasks: ['livereload']
},
css: {
files: ['app/**/*.css'],
tasks: ['livereload']
},
js: {
files: 'app/**/*.js',
tasks: ['livereload']
}
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-71-320.jpg)
![2013 KSDG 73
regarde: {
scss: {
files: ['app/**/*.scss'],
tasks: ['compass:dev']
},
coffee: {
files: '**/*.coffee',
tasks: ['coffee']
}
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-73-320.jpg)
![2013 KSDG 77
coffee: {
dev: {
expand: true,
cwd: 'app/assets/coffeescript/',
src: ['**/*.coffee'],
dest: 'app/assets/js/',
ext: '.js',
options: {
bare: true
}
}
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-77-320.jpg)
![2013 KSDG 80
grunt.registerTask('test', ['release',
'shell:test', 'mocha_phantomjs']);](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-80-320.jpg)
![2013 KSDG 89
cssmin: {
release: {
report: 'gzip',
expand: true,
cwd: 'app/assets/css',
src: ['*.css'],
dest: 'app/assets/css'
}
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-89-320.jpg)
![2013 KSDG 95
clean: {
options: {
force: true
},
release: ['app/assets/coffee',
'app/.sass-cache']
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-95-320.jpg)
![2013 KSDG 98
copy: {
release: {
files: [
{
src: 'app/js/main-built.js',
dest: 'public/js/20130519.js'
}
]
}
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/85/How-to-integrate-front-end-tool-via-gruntjs-98-320.jpg)
How to integrate front end tool via gruntjs
- 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
- 7. 2013 KSDG 7 統一團隊開發環境 Windows, Linux, Mac
- 11. 2013 KSDG 11 CSS 產生器 Sass/Scss
- 12. 2013 KSDG 12 gem install compass
- 14. 2013 KSDG 14 JavaScript 產生器
- 15. 2013 KSDG 15 npm install -g coffeescript
- 18. 2013 KSDG 18 Package Manager BowerBower http://bower.io/
- 19. 2013 KSDG 19 npm install -g bower
- 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.jsNode.js
- 26. 2013 KSDG 26 Node.js 發行速度快
- 27. 2013 KSDG 27 管理 Node.js 版本
- 28. 2013 KSDG 28 Node Version Manager nvmnvm 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
- 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?
- 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.
- 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.
- 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 }
- 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
- 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