Introduction to Grunt.js on Taiwan JavaScript Conference

你不可不知的前端開發工具
2013 JavaScript Conference 5/18,19

2013 JSDC 2
Who am I
Bo-Yi Wu
@appleboy
http://blog.wu-boy.com
https://github.com/appleboy
任職於瑞昱半導體RealTek(IC Design House)
- TV 多媒體部門
- Backbone.js, CodeIgniter, Larvel Node.js, MongoDB, Mariadb
MySQL, Twitter Bootstrap, Handlebars.js, HAProxy for load
balancer, Galera Cluster for MySQL ...

2013 JSDC 3
工欲善其事 , 必先利其器

2013 JSDC 4
昨天 UP Chen 講了七的工具

2013 JSDC 5
今天來聊聊程式相關套件工具

2013 JSDC 6
寫後端程式不再是
PHP,Ruby,Pyhton.. 等專屬
我們可以用我們可以用 Node.jsNode.js 取而代之取而代之

2013 JSDC 7
Node.js 發行速度快 API 常常更新

2013 JSDC 8
該如何管理該如何管理 Node.jsNode.js 版本

2013 JSDC 9
Node Version Manager: nvmnvm
https://github.com/creationix/nvm

2013 JSDC 11
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 JSDC 12
前端工程師會接觸到
JS,CSS,htmlJS,CSS,html

2013 JSDC 13
先來看看一般專案首頁
index.html

2013 JSDC 15
看看 header 載入哪些檔案

2013 JSDC 16
Popular Open Source
Normalize.css

2013 JSDC 17
升級套件版本很頭痛

2013 JSDC 18
如果載入了 10 個套件
就必須手動更新 10 次

2013 JSDC 19
引入套件管理程式

2013 JSDC 20
package manager for the web: BowerBower
http://bower.io/

2013 JSDC 21
定義下載路徑設定: .bowerrc

2013 JSDC 22
{
'directory': 'assets/vendor',
'json': 'component.json'
}

2013 JSDC 23
定義專案套件需求: component.json
$ bower install <pkg>#<version>

2013 JSDC 24
{
"name": "html5-template-engine",
"version": "1.0.0",
"dependencies": {
"jquery": "~1.9.1",
"normalize-scss": "~2.1.1",
"modernizr": "~2.6.2",
"requirejs": "~2.1.5"
}
}

2013 JSDC 25
以後不必擔心套件版本問題

2013 JSDC 26
JavaScript 產生器:CoffeeScript

2013 JSDC 27
為什麼要使用 CoffeeScript

2013 JSDC 28
Why Use CoffeeScript?
●
解決 JavaScript Coding Style 問題
– 讓 Javascript 看起來像是同一個人寫的
●
通過 Javascript Lint 測試
– http://www.javascriptlint.com/

2013 JSDC 29
不用再宣告 var 變數
CoffeeScript
# Assignment:
number = 42
opposite = true
JavaScript
var number, opposite;
number = 42;
opposite = true;

2013 JSDC 30
不用再使用任何括號
CoffeeScript
# Conditions:
number = -42 if opposite
# Functions:
square = (x) -> x * x
JavaScript
if (opposite) {
number = -42;
}
square = function(x) {
return x * x;
};

2013 JSDC 31
coffee -b -w -c -o assets/js assets/coffee

2013 JSDC 32
CSS 產生器 :Compass

2013 JSDC 33
為什麼要使用 compass

2013 JSDC 34
Why Use Compass?
●
解決跨瀏覽器 CSS Hack
– IE 瀏覽器還是要手動 Hack
●
支援 CSS Sprite
– 不需要靠 designer 合併圖檔 , 減少 network
request
●
撰寫 CSS3 非常容易
– Box, Shadow, Border Radius, Text Shadow.. etc
●
可自行定義 function, Variable … etc.

2013 JSDC 35
SCSS/SASS 選擇
Scss 跟 CSS 長的一樣
Sass 對於設計師而言很難學

2013 JSDC 36
無痛轉移原有 CSS 架構
Sass-convert -F css -T scss your.css new.css
Sass-convert -F css -R css_folder_path

2013 JSDC 37
隨時監控 scss 狀態
compass watch scss_folder_path

2013 JSDC 38
Make CSS3 so Easy

2013 JSDC 39
Border radius
SCSS
#border-radius {
@include border-radius(25px);
}
CSS
#border-radius {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

2013 JSDC 40
Box-shadow
SCSS
#box-shadow-default {
@include single-box-shadow;
}
CSS
#box-shadow-default {
-webkit-box-shadow: 0px
0px 5px #333333;
-moz-box-shadow: 0px 0px
5px #333333;
box-shadow: 0px 0px 5px
#333333;
}

2013 JSDC 41
Compass Assets 設定
config.rb

2013 JSDC 43
config.rb: images path
SCSS
#logo {
backgroung-image: image-
url('logo.png');
}
CSS
http_path = "/"
relative_assets = true
#logo {
backgroung-image:
url('../images/logo.png?
1293690212');
}

2013 JSDC 44
SCSS
#logo {
backgroung-image: image-
url('logo.png');
}
CSS
http_path = "/"
relative_assets = false
#logo {
backgroung-image:
url('/images/logo.png?
1293690212');
}

2013 JSDC 46
SCSS
#logo {
backgroung-image: inline-
image('logo.png');
}
CSS
#logo {
backgroung-image:
url('data:image/png;base64,xx
xxxxxxxx');
}

2013 JSDC 47
Image-Sprites
Ref: google sprites

2013 JSDC 48
Image-Sprites
SCSS
@import "my-icons/*.png";
@include all-my-icons-sprites;
CSS
.my-icons-sprite,my-icons-
edit, .my-icons-save
{ background: url('/images/my-
icons-s34fe0604ab.png') no-
repeat; }
.my-icons-edit { background-
position: 0 0; }
.my-icons-save { background-
position: 0 -32px; }

2013 JSDC 49
JavaScritp模組工具:RequireJS

2013 JSDC 50
為什麼要使用 RequireJS

2013 JSDC 52
網站 include 超多外部套件

2013 JSDC 53
每個套件都有相依性問題

2013 JSDC 54
RequireJS 解決相依性問題

2013 JSDC 57
<script data-main="js/main" src="js/require.js"></script>
取代全部 javascript tag

2013 JSDC 59
RequireJS 只有這樣而已？

2013 JSDC 60
作者另外開發的編譯工具:r.js
https://github.com/jrburke/r.js/

2013 JSDC 62
使用後
r.js -o build/app.build.js

2013 JSDC 63
前端必備工具 : Livereload
http://livereload.com/

2013 JSDC 64
雙螢幕寫程式必備工具

2013 JSDC 65
每天按 Ctrl+F5 至少 100 次
保守估計

2013 JSDC 66
Guardfile 設定檔

2013 JSDC 67
# A sample Guardfile
# More info at
https://github.com/guard/guard#readme
guard 'livereload' do
watch(%r{app/.+.(html|htm)$})
watch(%r{app/assets/css/.+.css})
watch(%r{app/assets/js/.+.js})
watch(%r{app/assets/templates/.+.handlebars})
end

2013 JSDC 68
簡易Web Server: Node Express
http://expressjs.com/

2013 JSDC 69
不需要安裝Apache,Nginx,lighttpd
http://expressjs.com/

2013 JSDC 70
var app, express, fs, port;
fs = require('fs');
express = require('express');
app = express();
port = 4000;
app.use(express["static"](__dirname + '/'));
app.use(express.directory(__dirname + '/'));
app.use(express.errorHandler());
app.use(function(req, res, next) {
console.log('%s %s', req.method, req.url);
return next();
});
app.use(app.router);
app.listen(port);
console.log('Server listening on http://localhost:' + port);

2013 JSDC 71
上述工具重點整理

2013 JSDC 72
Bower, Compass ...
●
bower install
●
compass watch .
●
coffee -b -w -c -o js/ coffeescript/
●
●
node build/server.js
●
guard start

2013 JSDC 73
指令有點多有點雜

2013 JSDC 74
寫成 Makefile 執行

2013 JSDC 75
build:
compass:
compass watch .
coffee:
coffee -b -w -c -o js/ coffeescript/
livereload:
guard start
all: compass coffee livereload

2013 JSDC 76
好像有好一點？

2013 JSDC 77
但是對 Windows 開發環境 ?

2013 JSDC 79
What is Fucking Makefile?
WTF

2013 JSDC 80
為了解決環境相容問題

2013 JSDC 81
JavaScript Task Runner
Grunt.js

2013 JSDC 82
Why Use Grunt.js
●
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 JSDC 83
Grunt 0.4.x requires Node.js version >= 0.8.0.
npm uninstall -g grunt
npm install -g grunt-cli
Grunt 0.4.x requires Node.js version >= 0.8.0.

2013 JSDC 84
How the Grunt CLI works?

2013 JSDC 85
package.json && Gruntfile.js

2013 JSDC 86
package.json
npm init建立此檔案
npm install grunt-cli --save-dev
npm init建立此檔案

2013 JSDC 87
Gruntfile.js or Gruntfile.coffee
grunt.js for 0.3.x versions of Grunt.

2013 JSDC 88
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 JSDC 89
開始撰寫 Gruntfile.js

2013 JSDC 90
The "wrapper" function

2013 JSDC 91
module.exports = function(grunt) {
// Do grunt-related things in here
};

2013 JSDC 92
Project and task configuration

2013 JSDC 93
grunt.initConfig({
pkg: project_config,
shell: {
bower: {
command: 'node node_modules/.bin/bower install',
options: {
stdout: true,
stderr: true,
callback: function(err, stdout, stderr, cb) {
console.log('Install bower package compeletely.');
return cb();
}
}
}
}
});

2013 JSDC 94
Loading grunt plugins and tasks

2013 JSDC 95
grunt.loadNpmTasks('grunt-shell');

2013 JSDC 97
// Default task(s).
grunt.registerTask('default', ['connect', 'watch']);
// Deploy task(s).
grunt.registerTask('release', ['htmlmin', 'cssmin']);

2013 JSDC 98
Working with an existing grunt project

2013 JSDC 99
An existing grunt project
●
Change to the project's root directory.
●
Install project dependencies with npm
install.
●
Run Grunt with grunt.

2013 JSDC 100
用 Grunt 整合今日介紹工具

2013 JSDC 101
package manager: BowerBower
http://bower.io/
https://github.com/yatskevich/grunt-bower-task

2013 JSDC 102
Bower 只會在專案初始化執行

2013 JSDC 103
bower: {
install: {
options: {
cleanup: false,
install: true,
verbose: true,
copy: false
}
}
}

2013 JSDC 104
bower: {
cleanup: {
options: {
cleanup: true,
install: false,
verbose: true,
copy: false
}
}
}

2013 JSDC 105
$ grunt bower:install
$ grunt bower:cleanup

2013 JSDC 106
JavaScript 產生器:CoffeeScript
https://github.com/gruntjs/grunt-contrib-coffee

2013 JSDC 107
coffee: {
dev: {
expand: true,
cwd: 'app/assets/coffee/',
src: ['**/*.coffee'],
dest: 'app/assets/js/',
ext: '.js',
options: {
bare: true
}
}
}

2013 JSDC 108
$ grunt coffee:dev

2013 JSDC 109
CSS 產生器 :Compass

2013 JSDC 110
不需要 config.rb 設定檔

2013 JSDC 111
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 JSDC 112
$grunt compass:dev

2013 JSDC 113
前端必備工具 : Livereload
http://livereload.com/
https://github.com/gruntjs/grunt-contrib-livereload

2013 JSDC 114
Setup Server
https://github.com/gruntjs/grunt-contrib-connect

2013 JSDC 115
connect: {
livereload: {
options: {
hostname: '0.0.0.0',
port: 3000,
base: '.'
}
}
}

2013 JSDC 116
Run tasks whenever watched files change.
https://github.com/gruntjs/grunt-contrib-livereload

2013 JSDC 117
regarde: {
html: {
files: ['app/**/*.{html,htm}'],
tasks: ['livereload']
},
scss: {
files: ['app/**/*.scss'],
tasks: ['compass:dev']
},
css: {
files: ['app/**/*.css'],
},
js: {
files: 'app/**/*.js',
},
coffee: {
files: '**/*.coffee',
tasks: ['coffee']
}
}

2013 JSDC 118
grunt.registerTask('init', ['livereload-start', 'connect', 'regarde'])
$ grunt init

2013 JSDC 120
專案開發環境講完

2013 JSDC 121
Deploy Your Project

2013 JSDC 122
這不是後端工程師該做的嘛？

2013 JSDC 123
很抱歉台灣老闆不是這樣想

2013 JSDC 124
Ref: http://goo.gl/PKIr4

2013 JSDC 125
Before Deploying Project
●
JavaScript Minify and Combine (requirejs)
●
CSS Minify (cssmin)
●
Html Minify (htmlmin)
●
Remove unnecessary files (clean)
●
Copy files (copy)

2013 JSDC 126
JavaScript Minify and Combine
https://github.com/asciidisco/grunt-requirejs

2013 JSDC 127
requirejs: {
  release: {
    options: {
      appDir: "app/",
      baseUrl: "assets/js/",
      dir: "public",
      name: "main",
      mainConfigFile: 'app/assets/js/main.js',
      preserveLicenseComments: false,
      fileExclusionRegExp: /^(.|node_modules)/,
      paths: {
        jquery: '../vendor/jquery/jquery'
      }
    }
  }
}

2013 JSDC 128
$ grunt requirejs:release

2013 JSDC 129
CSS Minify
https://github.com/gruntjs/grunt-contrib-cssmin

2013 JSDC 130
cssmin: {
release: {
report: 'gzip',
expand: true,
cwd: 'app/assets/css',
src: ['*.css'],
dest: 'app/assets/css'
}
}

2013 JSDC 131
$ grunt cssmin:release

2013 JSDC 132
Html Minify
https://github.com/gruntjs/grunt-contrib-htmlmin

2013 JSDC 133
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
release: {
files: {
'public/index.html': 'app/index.html'
}
}
}

2013 JSDC 134
$ grunt htmlmin:release

2013 JSDC 135
Remove unnecessary files
https://github.com/gruntjs/grunt-contrib-clean

2013 JSDC 136
clean: {
options: {
force: true
},
release: ['app/assets/coffee',
'app/.sass-cache']
}

2013 JSDC 137
$ grunt clean:release

2013 JSDC 138
Copy files
https://github.com/gruntjs/grunt-contrib-copy

2013 JSDC 139
copy: {
release: {
files: [
{
src: 'app/js/main-built.js',
dest: 'public/js/20130519.js'
}
]
}
}

2013 JSDC 140
$ grunt copy:release

2013 JSDC 141
今日所有整合都在 Github
https://github.com/appleboy/html5-template-engine

2013 JSDC 142
Html5 Template Engine

2013 JSDC 143
Features
●
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 3000 port
●
Support JavaScript Task Runner GruntJS
●
Support JavaScript test framework Mocha

2013 JSDC 144
歡迎Fork 打造自己的開發環境

2013 JSDC 145
另外有 Backbone 開發環境
https://github.com/appleboy/backbone-template-engine

2013 JSDC 146
兩個 Repository 差異在哪？

2013 JSDC 147
Backbone.js+Handlebar.js

2013 JSDC 148
或者你只需要minify html css javascript

2013 JSDC 149
可以參考Shell Script: Minify tool
https://github.com/appleboy/minify-tool

2013 JSDC 150
Features
●
JavaScript compressor: UglifyJS
●
CSS compressor: Sqwish
●
Html compressor: htmlcompressor
●
Optimize images: image_optim

2013 JSDC 151
$ minify (folder|file)_path

2013 JSDC 153
謝謝大家及工作團隊

Introduction to Grunt.js on Taiwan JavaScript Conference

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to Grunt.js on Taiwan JavaScript Conference

Similar to Introduction to Grunt.js on Taiwan JavaScript Conference (20)

More from Bo-Yi Wu

More from Bo-Yi Wu (18)

Recently uploaded

Recently uploaded (20)

Introduction to Grunt.js on Taiwan JavaScript Conference