Downloaded 80 times
![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/75/How-to-integrate-front-end-tool-via-gruntjs-54-2048.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/75/How-to-integrate-front-end-tool-via-gruntjs-71-2048.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/75/How-to-integrate-front-end-tool-via-gruntjs-73-2048.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/75/How-to-integrate-front-end-tool-via-gruntjs-77-2048.jpg)
![2013 KSDG 80
grunt.registerTask('test', ['release',
'shell:test', 'mocha_phantomjs']);](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/75/How-to-integrate-front-end-tool-via-gruntjs-80-2048.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/75/How-to-integrate-front-end-tool-via-gruntjs-89-2048.jpg)
![2013 KSDG 95
clean: {
options: {
force: true
},
release: ['app/assets/coffee',
'app/.sass-cache']
}](https://image.slidesharecdn.com/2013-05-25ksdc-130525074910-phpapp01/75/How-to-integrate-front-end-tool-via-gruntjs-95-2048.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/75/How-to-integrate-front-end-tool-via-gruntjs-98-2048.jpg)
Uploaded byBo-Yi Wu
How to integrate front end tool via gruntjs
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.
More Related Content
How to integrate front end tool via gruntjs
- 1.
- 2. 2013 KSDG 2 Whoam 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.
- 5.
- 6.
- 7. 2013 KSDG 7 統一團隊開發環境 Windows,Linux, Mac
- 8.
- 9.
- 10.
- 11. 2013 KSDG 11 CSS產生器 Sass/Scss
- 12. 2013 KSDG 12 geminstall compass
- 13.
- 14.
- 15. 2013 KSDG 15 npminstall -g coffeescript
- 16.
- 17.
- 18. 2013 KSDG 18 PackageManager BowerBower http://bower.io/
- 19. 2013 KSDG 19 npminstall -g bower
- 20.
- 21.
- 22. 2013 KSDG 22 PHPCoding Style PHP-FIG PSR-0,1,2 http://www.php-fig.org/
- 23. 2013 KSDG 23 自動修正 CodingStyle PHP-CS-Fixer https://github.com/fabpot/PHP-CS-Fixer
- 24. 2013 KSDG 24 寫Server 端不再 是 PHP,Python 程式語言
- 25. 2013 KSDG 25 JavScriptLanguage Node.jsNode.js
- 26. 2013 KSDG 26 Node.js發行速度快
- 27. 2013 KSDG 27 管理Node.js 版本
- 28. 2013 KSDG 28 NodeVersion Manager nvmnvm https://github.com/creationix/nvm
- 29. 2013 KSDG 29 Howto 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.
- 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.
- 38. 2013 KSDG 38 JavaScriptTask Runner GruntJS
- 39. 2013 KSDG 39 WhyUse 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 Howthe Grunt CLI works?
- 41.
- 42. 2013 KSDG 42 package.json&& Gruntfile.js
- 43. 2013 KSDG 43 package.json npminstall grunt-cli --save-dev npm init 建立此檔案
- 44. 2013 KSDG 44 Gruntfile.jsor 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.
- 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.
- 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 開發專案三步驟 ● InitializeProject ● Test Project ● Deploy Project
- 57. 2013 KSDG 57 開發專案三步驟 ● InitializeProject ● Test Project ● Deploy Project
- 58. 2013 KSDG 58 InitializeProject ● Bower install ● Create server via express. ● Livereload ● Coffeescript and compass
- 59. 2013 KSDG 59 InitializeProject ● 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 InitializeProject ● 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.
- 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 InitializeProject ● Bower install ● Create server via express. ● Livereload ● Coffeescript and compass
- 69. 2013 KSDG 69 livereload:{ port: 35729 }
- 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 InitializeProject ● 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.
- 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.
- 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 開發專案三步驟 ● InitializeProject ● 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 開發專案三步驟 ● InitializeProject ● Test Project ● Deploy Project
- 83.
- 84. 2013 KSDG 84 BeforeDeploying Project ● JavaScript Minify and Combine (requirejs) ● CSS Minify (cssmin) ● Html Minify (htmlmin) ● Remove unnecessary files (clean) ● Copy files (copy)
- 85. 2013 KSDG 85 JavaScriptMinify 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 CSSMinify 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 HtmlMinify 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 Removeunnecessary 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 Copyfiles 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 Html5Template Engine https://github.com/appleboy/html5-template-engine
- 102. 2013 KSDG 102 ● Thelatest 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.