• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Grunt.js on Taiwan JavaScript Conference
 

Introduction to Grunt.js on Taiwan JavaScript Conference

on

  • 15,423 views

Blog: ...

Blog:
http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/

高雄 KSDG 分享: 打造團隊共同開發環境
http://blog.wu-boy.com/2013/05/how-to-integrate-front-end-tools-via-gruntjs/

Statistics

Views

Total Views
15,423
Views on SlideShare
9,565
Embed Views
5,858

Actions

Likes
98
Downloads
289
Comments
0

33 Embeds 5,858

http://blog.wu-boy.com 5562
http://leoyehsblog.blogspot.tw 65
http://feeds2.feedburner.com 47
http://outcircle.com 31
http://www.box-color.com.tw 20
https://twitter.com 20
http://localhost 14
http://10.0.1.42 14
http://jerry54010.kd.io 12
http://feedwrangler.net 8
http://www.plurk.com 7
http://flyeip.flysheet.com.tw 7
http://digg.com 6
http://funsung.blogspot.com 5
http://feeds.feedburner.com 4
http://www.newsblur.com 4
http://cloud.feedly.com 4
https://www.google.com.tw 3
http://reader.aol.com 3
http://leoyehsblog.blogspot.ru 3
http://feedly.com 2
http://leoyehsblog.blogspot.hk 2
http://192.168.1.59 2
http://nuevospowerpoints.blogspot.com.ar 2
http://translate.googleusercontent.com 2
http://xianguo.com 2
http://nuevospowerpoints.blogspot.com.es 1
http://nuevospowerpoints.blogspot.com 1
http://leoyehsblog.blogspot.com 1
http://blog.wu-boy.com&_=1368957274973 HTTP 1
http://funsung.blogspot.jp 1
http://newsblur.com 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Grunt.js on Taiwan JavaScript Conference Introduction to Grunt.js on Taiwan JavaScript Conference Presentation Transcript

    • 你不可不知的前端開發工具2013 JavaScript Conference 5/18,19
    • 2013 JSDC 2Who am IBo-Yi Wu@appleboyhttp://blog.wu-boy.comhttps://github.com/appleboy任職於瑞昱半導體RealTek(IC Design House)- TV 多媒體部門- Backbone.js, CodeIgniter, Larvel Node.js, MongoDB, MariadbMySQL, Twitter Bootstrap, Handlebars.js, HAProxy for loadbalancer, 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 7Node.js 發行速度快 API 常常更新
    • 2013 JSDC 8該如何管理該如何管理 Node.jsNode.js 版本
    • 2013 JSDC 9Node Version Manager: nvmnvmhttps://github.com/creationix/nvm
    • 2013 JSDC 10How to use?
    • 2013 JSDC 11How 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 16Popular Open SourceNormalize.css
    • 2013 JSDC 17升級套件版本很頭痛
    • 2013 JSDC 18如果載入了 10 個套件就必須手動更新 10 次
    • 2013 JSDC 19引入套件管理程式
    • 2013 JSDC 20package manager for the web: BowerBowerhttp://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 26JavaScript 產生器:CoffeeScript
    • 2013 JSDC 27為什麼要使用 CoffeeScript
    • 2013 JSDC 28Why Use CoffeeScript?●解決 JavaScript Coding Style 問題– 讓 Javascript 看起來像是同一個人寫的●通過 Javascript Lint 測試– http://www.javascriptlint.com/
    • 2013 JSDC 29不用再宣告 var 變數CoffeeScript# Assignment:number = 42opposite = trueJavaScriptvar number, opposite;number = 42;opposite = true;
    • 2013 JSDC 30不用再使用任何括號CoffeeScript# Conditions:number = -42 if opposite# Functions:square = (x) -> x * xJavaScriptif (opposite) {number = -42;}square = function(x) {return x * x;};
    • 2013 JSDC 31coffee -b -w -c -o assets/js assets/coffee
    • 2013 JSDC 32CSS 產生器 :Compass
    • 2013 JSDC 33為什麼要使用 compass
    • 2013 JSDC 34Why Use Compass?●解決跨瀏覽器 CSS Hack– IE 瀏覽器還是要手動 Hack●支援 CSS Sprite– 不需要靠 designer 合併圖檔 , 減少 networkrequest●撰寫 CSS3 非常容易– Box, Shadow, Border Radius, Text Shadow.. etc●可自行定義 function, Variable … etc.
    • 2013 JSDC 35SCSS/SASS 選擇Scss 跟 CSS 長的一樣Sass 對於設計師而言很難學
    • 2013 JSDC 36無痛轉移原有 CSS 架構Sass-convert -F css -T scss your.css new.cssSass-convert -F css -R css_folder_path
    • 2013 JSDC 37隨時監控 scss 狀態compass watch scss_folder_path
    • 2013 JSDC 38Make CSS3 so Easy
    • 2013 JSDC 39Border radiusSCSS#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 40Box-shadowSCSS#box-shadow-default {@include single-box-shadow;}CSS#box-shadow-default {-webkit-box-shadow: 0px0px 5px #333333;-moz-box-shadow: 0px 0px5px #333333;box-shadow: 0px 0px 5px#333333;}
    • 2013 JSDC 41Compass Assets 設定config.rb
    • 2013 JSDC 42background-image
    • 2013 JSDC 43config.rb: images pathSCSS#logo {backgroung-image: image-url(logo.png);}CSShttp_path = "/"relative_assets = true#logo {backgroung-image:url(../images/logo.png?1293690212);}
    • 2013 JSDC 44config.rb: images pathSCSS#logo {backgroung-image: image-url(logo.png);}CSShttp_path = "/"relative_assets = false#logo {backgroung-image:url(/images/logo.png?1293690212);}
    • 2013 JSDC 45inline-image
    • 2013 JSDC 46config.rb: images pathSCSS#logo {backgroung-image: inline-image(logo.png);}CSS#logo {backgroung-image:url(data:image/png;base64,xxxxxxxxxx);}
    • 2013 JSDC 47Image-SpritesRef: google sprites
    • 2013 JSDC 48Image-SpritesSCSS@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 49JavaScritp模組工具:RequireJS
    • 2013 JSDC 50為什麼要使用 RequireJS
    • 2013 JSDC 51
    • 2013 JSDC 52網站 include 超多外部套件
    • 2013 JSDC 53每個套件都有相依性問題
    • 2013 JSDC 54RequireJS 解決相依性問題
    • 2013 JSDC 55main.js
    • 2013 JSDC 56app.js
    • 2013 JSDC 57<script data-main="js/main" src="js/require.js"></script>取代全部 javascript tag
    • 2013 JSDC 58index.html
    • 2013 JSDC 59RequireJS 只有這樣而已?
    • 2013 JSDC 60作者另外開發的編譯工具:r.jshttps://github.com/jrburke/r.js/
    • 2013 JSDC 61使用前
    • 2013 JSDC 62使用後r.js -o build/app.build.js
    • 2013 JSDC 63前端必備工具 : Livereloadhttp://livereload.com/
    • 2013 JSDC 64雙螢幕寫程式必備工具
    • 2013 JSDC 65每天按 Ctrl+F5 至少 100 次保守估計
    • 2013 JSDC 66Guardfile 設定檔
    • 2013 JSDC 67# A sample Guardfile# More info athttps://github.com/guard/guard#readmeguard livereload dowatch(%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 Expresshttp://expressjs.com/
    • 2013 JSDC 69不需要安裝Apache,Nginx,lighttpdhttp://expressjs.com/
    • 2013 JSDC 70var 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 72Bower, 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 75build:r.js -o build/app.build.jscompass:compass watch .coffee:coffee -b -w -c -o js/ coffeescript/livereload:guard startall: compass coffee livereload
    • 2013 JSDC 76好像有好一點?
    • 2013 JSDC 77但是對 Windows 開發環境 ?
    • 2013 JSDC 78
    • 2013 JSDC 79What is Fucking Makefile?WTF
    • 2013 JSDC 80為了解決環境相容問題
    • 2013 JSDC 81JavaScript Task RunnerGrunt.js
    • 2013 JSDC 82Why Use Grunt.js●Define Task Runner– Initial Project– Deploy Project– Unit Test Project●Designer Dont learning command line●Many Available Grunt plugins– CoffeeScript, Compass, Jade, Require.js– Twitter Bower, JSHint, CSSMin, Livereload
    • 2013 JSDC 83Grunt 0.4.x requires Node.js version >= 0.8.0.npm uninstall -g gruntnpm install -g grunt-cliGrunt 0.4.x requires Node.js version >= 0.8.0.
    • 2013 JSDC 84How the Grunt CLI works?
    • 2013 JSDC 85package.json && Gruntfile.js
    • 2013 JSDC 86package.jsonnpm init建立此檔案npm install grunt-cli --save-devnpm init建立此檔案
    • 2013 JSDC 87Gruntfile.js or Gruntfile.coffeegrunt.js for 0.3.x versions of Grunt.
    • 2013 JSDC 88Gruntfile.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 90The "wrapper" function
    • 2013 JSDC 91module.exports = function(grunt) {// Do grunt-related things in here};
    • 2013 JSDC 92Project and task configuration
    • 2013 JSDC 93grunt.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 94Loading grunt plugins and tasks
    • 2013 JSDC 95grunt.loadNpmTasks(grunt-shell);
    • 2013 JSDC 96Custom tasks
    • 2013 JSDC 97// Default task(s).grunt.registerTask(default, [connect, watch]);// Deploy task(s).grunt.registerTask(release, [htmlmin, cssmin]);
    • 2013 JSDC 98Working with an existing grunt project
    • 2013 JSDC 99An existing grunt project●Change to the projects root directory.●Install project dependencies with npminstall.●Run Grunt with grunt.
    • 2013 JSDC 100用 Grunt 整合今日介紹工具
    • 2013 JSDC 101package manager: BowerBowerhttp://bower.io/https://github.com/yatskevich/grunt-bower-task
    • 2013 JSDC 102Bower 只會在專案初始化執行
    • 2013 JSDC 103bower: {install: {options: {cleanup: false,install: true,verbose: true,copy: false}}}
    • 2013 JSDC 104bower: {cleanup: {options: {cleanup: true,install: false,verbose: true,copy: false}}}
    • 2013 JSDC 105$ grunt bower:install$ grunt bower:cleanup
    • 2013 JSDC 106JavaScript 產生器:CoffeeScripthttps://github.com/gruntjs/grunt-contrib-coffee
    • 2013 JSDC 107coffee: {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 109CSS 產生器 :Compass
    • 2013 JSDC 110不需要 config.rb 設定檔
    • 2013 JSDC 111compass: {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 114Setup Serverhttps://github.com/gruntjs/grunt-contrib-connect
    • 2013 JSDC 115connect: {livereload: {options: {hostname: 0.0.0.0,port: 3000,base: .}}}
    • 2013 JSDC 116Run tasks whenever watched files change.https://github.com/gruntjs/grunt-contrib-livereload
    • 2013 JSDC 117regarde: {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 118grunt.registerTask(init, [livereload-start, connect, regarde])$ grunt init
    • 2013 JSDC 119
    • 2013 JSDC 120專案開發環境講完
    • 2013 JSDC 121Deploy Your Project
    • 2013 JSDC 122這不是後端工程師該做的嘛?
    • 2013 JSDC 123很抱歉台灣老闆不是這樣想
    • 2013 JSDC 124Ref: http://goo.gl/PKIr4
    • 2013 JSDC 125Before Deploying Project●JavaScript Minify and Combine (requirejs)●CSS Minify (cssmin)●Html Minify (htmlmin)●Remove unnecessary files (clean)●Copy files (copy)
    • 2013 JSDC 126JavaScript Minify and Combinehttps://github.com/asciidisco/grunt-requirejs
    • 2013 JSDC 127requirejs: {  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 129CSS Minifyhttps://github.com/gruntjs/grunt-contrib-cssmin
    • 2013 JSDC 130cssmin: {release: {report: gzip,expand: true,cwd: app/assets/css,src: [*.css],dest: app/assets/css}}
    • 2013 JSDC 131$ grunt cssmin:release
    • 2013 JSDC 132Html Minifyhttps://github.com/gruntjs/grunt-contrib-htmlmin
    • 2013 JSDC 133htmlmin: {options: {removeComments: true,collapseWhitespace: true},release: {files: {public/index.html: app/index.html}}}
    • 2013 JSDC 134$ grunt htmlmin:release
    • 2013 JSDC 135Remove unnecessary fileshttps://github.com/gruntjs/grunt-contrib-clean
    • 2013 JSDC 136clean: {options: {force: true},release: [app/assets/coffee,app/.sass-cache]}
    • 2013 JSDC 137$ grunt clean:release
    • 2013 JSDC 138Copy fileshttps://github.com/gruntjs/grunt-contrib-copy
    • 2013 JSDC 139copy: {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 142Html5 Template Enginehttps://github.com/appleboy/html5-template-engine
    • 2013 JSDC 143Features●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 147Backbone.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 150Features●JavaScript compressor: UglifyJS●CSS compressor: Sqwish●Html compressor: htmlcompressor●Optimize images: image_optim
    • 2013 JSDC 151$ minify (folder|file)_path
    • 2013 JSDC 152Live Demo
    • 2013 JSDC 153謝謝大家及工作團隊