More Related Content Similar to Introduction to Grunt.js on Taiwan JavaScript Conference (20) Introduction to Grunt.js on Taiwan JavaScript Conference2. 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 ...
11. 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
24. 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"
}
}
28. 2013 JSDC 28
Why Use CoffeeScript?
●
解決 JavaScript Coding Style 問題
– 讓 Javascript 看起來像是同一個人寫的
●
通過 Javascript Lint 測試
– http://www.javascriptlint.com/
29. 2013 JSDC 29
不用再宣告 var 變數
CoffeeScript
# Assignment:
number = 42
opposite = true
JavaScript
var number, opposite;
number = 42;
opposite = true;
30. 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;
};
34. 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.
36. 2013 JSDC 36
無痛轉移原有 CSS 架構
Sass-convert -F css -T scss your.css new.css
Sass-convert -F css -R css_folder_path
39. 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;
}
43. 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');
}
44. 2013 JSDC 44
config.rb: images path
SCSS
#logo {
backgroung-image: image-
url('logo.png');
}
CSS
http_path = "/"
relative_assets = false
#logo {
backgroung-image:
url('/images/logo.png?
1293690212');
}
46. 2013 JSDC 46
config.rb: images path
SCSS
#logo {
backgroung-image: inline-
image('logo.png');
}
CSS
#logo {
backgroung-image:
url('data:image/png;base64,xx
xxxxxxxx');
}
48. 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; }
67. 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
70. 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);
72. 2013 JSDC 72
Bower, Compass ...
●
bower install
●
compass watch .
●
coffee -b -w -c -o js/ coffeescript/
●
r.js -o build/app.build.js
●
node build/server.js
●
guard start
75. 2013 JSDC 75
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
82. 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
83. 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.
88. 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.
93. 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();
}
}
}
}
});
97. 2013 JSDC 97
// Default task(s).
grunt.registerTask('default', ['connect', 'watch']);
// Deploy task(s).
grunt.registerTask('release', ['htmlmin', 'cssmin']);
99. 2013 JSDC 99
An existing grunt project
●
Change to the project's root directory.
●
Install project dependencies with npm
install.
●
Run Grunt with grunt.
101. 2013 JSDC 101
package manager: BowerBower
http://bower.io/
https://github.com/yatskevich/grunt-bower-task
103. 2013 JSDC 103
bower: {
install: {
options: {
cleanup: false,
install: true,
verbose: true,
copy: false
}
}
}
104. 2013 JSDC 104
bower: {
cleanup: {
options: {
cleanup: true,
install: false,
verbose: true,
copy: false
}
}
}
107. 2013 JSDC 107
coffee: {
dev: {
expand: true,
cwd: 'app/assets/coffee/',
src: ['**/*.coffee'],
dest: 'app/assets/js/',
ext: '.js',
options: {
bare: true
}
}
}
111. 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'
}
}
}
113. 2013 JSDC 113
前端必備工具 : Livereload
http://livereload.com/
https://github.com/gruntjs/grunt-contrib-livereload
116. 2013 JSDC 116
Run tasks whenever watched files change.
https://github.com/gruntjs/grunt-contrib-livereload
117. 2013 JSDC 117
regarde: {
html: {
files: ['app/**/*.{html,htm}'],
tasks: ['livereload']
},
scss: {
files: ['app/**/*.scss'],
tasks: ['compass:dev']
},
css: {
files: ['app/**/*.css'],
tasks: ['livereload']
},
js: {
files: 'app/**/*.js',
tasks: ['livereload']
},
coffee: {
files: '**/*.coffee',
tasks: ['coffee']
}
}
125. 2013 JSDC 125
Before Deploying Project
●
JavaScript Minify and Combine (requirejs)
●
CSS Minify (cssmin)
●
Html Minify (htmlmin)
●
Remove unnecessary files (clean)
●
Copy files (copy)
130. 2013 JSDC 130
cssmin: {
release: {
report: 'gzip',
expand: true,
cwd: 'app/assets/css',
src: ['*.css'],
dest: 'app/assets/css'
}
}
133. 2013 JSDC 133
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
release: {
files: {
'public/index.html': 'app/index.html'
}
}
}
136. 2013 JSDC 136
clean: {
options: {
force: true
},
release: ['app/assets/coffee',
'app/.sass-cache']
}
139. 2013 JSDC 139
copy: {
release: {
files: [
{
src: 'app/js/main-built.js',
dest: 'public/js/20130519.js'
}
]
}
}
143. 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
145. 2013 JSDC 145
另外有 Backbone 開發環境
https://github.com/appleboy/backbone-template-engine
146. 2013 JSDC 146
兩個 Repository 差異在哪?
https://github.com/appleboy/backbone-template-engine