Post on 08-Sep-2014
description
你不可不知的前端開發工具2013 JavaScript Conference 5/18,19
2013 JSDC 2
Who am I
Bo-Yi Wu@appleboyhttp://blog.wu-boy.comhttps://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: nvmnvmhttps://github.com/creationix/nvm
2013 JSDC 10
How to use?
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 14
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 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 = 42opposite = true
JavaScriptvar number, opposite;number = 42;opposite = true;
2013 JSDC 30
不用再使用任何括號
CoffeeScript# Conditions:number = -42 if opposite# Functions:square = (x) -> x * x
JavaScriptif (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 42
background-image
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
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'); }
2013 JSDC 45
inline-image
2013 JSDC 46
config.rb: images path
SCSS#logo {
backgroung-image: inline-image('logo.png'); }
CSS#logo { backgroung-image: url('data:image/png;base64,xxxxxxxxxx'); }
2013 JSDC 47
Image-SpritesRef: 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 51
2013 JSDC 52
網站 include超多外部套件
2013 JSDC 53
每個套件都有相依性問題
2013 JSDC 54
RequireJS解決相依性問題
2013 JSDC 55
main.js
2013 JSDC 56
app.js
2013 JSDC 57
<script data-main="js/main" src="js/require.js"></script>
取代全部 javascript tag
2013 JSDC 58
index.html
2013 JSDC 59
RequireJS只有這樣而已？
2013 JSDC 61
使用前
2013 JSDC 62
使用後
r.js -o build/app.build.js
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 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/● r.js -o build/app.build.js● node build/server.js● guard start
2013 JSDC 73
指令有點多有點雜
2013 JSDC 74
寫成Makefile執行
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
2013 JSDC 76
好像有好一點？
2013 JSDC 77
但是對Windows開發環境?
2013 JSDC 78
2013 JSDC 79
What is Fucking Makefile?WTF
2013 JSDC 80
為了解決環境相容問題
2013 JSDC 81
JavaScript Task RunnerGrunt.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 gruntnpm 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.jsonnpm init建立此檔案
npm install grunt-cli --save-devnpm init建立此檔案
2013 JSDC 87
Gruntfile.js or Gruntfile.coffeegrunt.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 96
Custom tasks
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: BowerBowerhttp://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
前端必備工具 : Livereloadhttp://livereload.com/
https://github.com/gruntjs/grunt-contrib-livereload
2013 JSDC 114
Setup Serverhttps://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'], tasks: ['livereload'] }, js: { files: 'app/**/*.js', tasks: ['livereload'] }, coffee: { files: '**/*.coffee', tasks: ['coffee'] }}
2013 JSDC 118
grunt.registerTask('init', ['livereload-start', 'connect', 'regarde'])
$ grunt init
2013 JSDC 119
2013 JSDC 120
專案開發環境講完
2013 JSDC 121
Deploy Your Project
2013 JSDC 122
這不是後端工程師該做的嘛？
2013 JSDC 123
很抱歉台灣老闆不是這樣想
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 Combinehttps://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 Minifyhttps://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 Minifyhttps://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 fileshttps://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 fileshttps://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
今日所有整合都在Githubhttps://github.com/appleboy/html5-template-engine
2013 JSDC 142
Html5 Template Enginehttps://github.com/appleboy/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打造自己的開發環境https://github.com/appleboy/html5-template-engine
2013 JSDC 145
另外有Backbone開發環境https://github.com/appleboy/backbone-template-engine
2013 JSDC 146
兩個Repository差異在哪？https://github.com/appleboy/backbone-template-engine
2013 JSDC 147
Backbone.js+Handlebar.jshttps://github.com/appleboy/backbone-template-engine
2013 JSDC 148
或者你只需要minify html css javascript
2013 JSDC 149
可以參考Shell Script: Minify toolhttps://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 152
Live Demo
2013 JSDC 153
謝謝大家及工作團隊