How to integrate front end tool via gruntjs

打造團隊共同開發環境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 18

Package ManagerBowerBower

http://bower.io/

2013 KSDG 19

npm install -g bower

2013 KSDG 20

前端工具介紹到此

2013 KSDG 21

後端工程師PHP,Ruby,Python

2013 KSDG 22

PHP Coding StylePHP-FIGPSR-0,1,2

http://www.php-fig.org/

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