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