More Related Content Similar to How to integrate front end tool via gruntjs Similar to How to integrate front end tool via gruntjs (20) 2. 2013 KSDG 2
Who am 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
29. 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
32. 2013 KSDG 32
Bower, Compass ...
●
bower install
●
compass watch .
●
coffee -b -w -c -o js/ coffeescript/
●
node build/server.js
●
guard start
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
39. 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
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.
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.
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.
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']);
58. 2013 KSDG 58
Initialize Project
●
Bower install
●
Create server via express.
●
Livereload
●
Coffeescript and compass
59. 2013 KSDG 59
Initialize Project
●
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
}
}
}
62. 2013 KSDG 62
Initialize Project
●
Bower install
●
Create server via express
●
Livereload
●
Coffeescript and compass
68. 2013 KSDG 68
Initialize Project
●
Bower install
●
Create server via express.
●
Livereload
●
Coffeescript and compass
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
Initialize Project
●
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']
}
}
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'
}
}
}
77. 2013 KSDG 77
coffee: {
dev: {
expand: true,
cwd: 'app/assets/coffeescript/',
src: ['**/*.coffee'],
dest: 'app/assets/js/',
ext: '.js',
options: {
bare: true
}
}
}
84. 2013 KSDG 84
Before Deploying Project
●
JavaScript Minify and Combine
(requirejs)
●
CSS Minify (cssmin)
●
Html Minify (htmlmin)
●
Remove unnecessary files (clean)
●
Copy files (copy)
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'
}
}
}
}
89. 2013 KSDG 89
cssmin: {
release: {
report: 'gzip',
expand: true,
cwd: 'app/assets/css',
src: ['*.css'],
dest: 'app/assets/css'
}
}
92. 2013 KSDG 92
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
release: {
files: {
'public/index.html': 'app/index.html'
}
}
}
95. 2013 KSDG 95
clean: {
options: {
force: true
},
release: ['app/assets/coffee',
'app/.sass-cache']
}
98. 2013 KSDG 98
copy: {
release: {
files: [
{
src: 'app/js/main-built.js',
dest: 'public/js/20130519.js'
}
]
}
}
102. 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
103. 2013 KSDG 103
歡迎 Fork
打造團隊開發環境
https://github.com/appleboy/html5-template-engine
