Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
using-grunt-js
Search
TooBug
May 31, 2013
Programming
0
29
using-grunt-js
使用Grunt.js走进前端构建新时代
TooBug
May 31, 2013
Tweet
Share
Other Decks in Programming
See All in Programming
効率的な開発手段として VRTを活用する
ishkawa
0
130
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.3k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
910
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Discover Metal 4
rei315
2
130
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
52
33k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
3.2k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Featured
See All Featured
Visualization
eitanlees
146
16k
Speed Design
sergeychernyshev
32
1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Music & Morning Musume
bryan
46
6.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Site-Speed That Sticks
csswizardry
10
680
Agile that works and the tools we love
rasmusluckow
329
21k
Transcript
使用Grunt.js走进前端构建 新时代 TooBug 2013.3
那一年,世界还很美好 写HTML 写HTML+CSS 写HTML+CSS+JS 发布
直到“性能”遇到了前端 写HTML 写CSS 写JS 压缩CSS 合并CSS 雪碧图 压缩JS 合并JS Base64
图片压缩 时间戳 …… 发 布
前端开始有了预处理工具 ◦ YUI Compressor (Java) ◦ Google Closure Compiler (Java)
◦ CSS Tidy/Clean CSS (online) ◦ uglify (JavaScript) ◦ CSS Gaga (Windows) ◦ ……
问题随之而来 ◦ 学习门槛 * 每个工具 * 每个人 ◦ 流程约定 &
规范 * 每个人 ◦ 初始化需要安装各种平台 ◦ 复杂的配置或者约定 ◦ 跨平台? ◦ 配置漫游?
除了性能,还要质量 ◦ HTML validate ◦ CSS validate ◦ CSS Lint
◦ JSLint/Hint ◦ 测试(单元测试 、黑盒测试) ◦ ……
除了它俩,还有可维护性以及“爽” ◦ LESS & BootStrap 动态样式语言,“最像CSS” ◦ SASS & Compass
动态样式语言,“最强大” ◦ Stylus 动态样式语言,“最优雅” ◦ Coffee & Coco 类python语法,填补了一些坑 ◦ Type Script 来自Microsoft ◦ Dart 来自Google
自己动手,丰衣足食 手工 ◦ …… ◦ …… ◦ …… ◦ ……
◦ 杀了我吧!!! 批处理 ◦ 学习成本高昂 ◦ 编写成本尤其高昂 ◦ 维护? ◦ 跨平台?
瑞士军刀——Grunt.js Grunt.js 压缩/合并 CSS 压缩/合并 JS 雪碧图 BASE64 图片优化 时间戳
LESS/SASS/Stylus/ Coffee/Coco 单元测试 黑盒测试 Lint/Hint Validate 想象力
何方神圣? ◦ 开源项目(gruntjs.com) ◦ 基于Node.js ◦ 命令行 ◦ 跨平台(Win/OS X/Linux)
◦ 使用时以任务(Task)为构建颗粒 ◦ 任务描述使用配置文件 ◦ 插件式(仅自带极少构建功能)
一堵芳容 $ grunt Running "jshint:gruntfile" (jshint) task >> 1 file
lint free. Running "jshint:src" (jshint) task >> 1 file lint free. Running "jshint:test" (jshint) task >> 1 file lint free. Running "qunit:files" (qunit) task Testing test/tiny-pubsub.html....OK >> 4 assertions passed (23ms) Running "clean:files" (clean) task Cleaning "dist"...OK Running "concat:dist" (concat) task File "dist/ba-tiny-pubsub.js" created. Running "uglify:dist" (uglify) task File "dist/ba-tiny-pubsub.min.js" created. Uncompressed size: 389 bytes. Compressed size: 119 bytes gzipped (185 bytes minified). Done, without errors.
得到ing开始(getting started) 1. 本机环境 a. 安装Node.js(http://nodejs.org) b. 设置代理(npm set proxy=http://....com:8080)
c. 安装Grunt-CLI(npm install -g grunt-cli) 2. 项目配置 a. 准备package.json(npm init) b. 安装依赖(npm install grunt-contrib-xx --save-dev) c. 准备Gruntfile.js(即构建任务) 3. 构建 a. grunt b. 木有了……
常用插件 ◦ grunt-contrib-jshint ◦ grunt-contrib-csslint* ◦ grunt-contrib-uglify ◦ grunt-contrib-cssmin ◦
grunt-contrib-concat ◦ grunt-contrib-copy ◦ grunt-usemin** ◦ grunt-htmlhint***
资源 ◦ Gruntjs官方网站 http://www.gruntjs.com ◦ Gruntjs中文社区 http://www.gruntjs.org ◦ http://www.oschina.net/question/89964_47198 ◦
http://www.cnblogs.com/lhb25/tag/Grunt%E6%95%99%E7%A8%8B/ ◦ http://pan.baidu.com/share/link?shareid=114364&uk=3307876012
About TooBug 前端工程师 现就职于腾讯CDC http://weibo.com/TooooBug https://github.com/TooooBug
[email protected]
附:本机环境配置 $ npm set proxy=http://proxy.tencent.com:8080 $ sudo npm install -g
grunt-cli Password: npm http GET https://registry.npmjs.org/grunt-cli npm http 200 https://registry.npmjs.org/grunt-cli ...... /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
[email protected]
/usr/local/lib/node_modules/grunt-cli ├──
[email protected]
(
[email protected]
) └──
[email protected]
(
[email protected]
,
[email protected]
)
附:项目配置 $ npm init This utility will walk you through
creating a package.json file. ...... Press ^C at any time to quit. name: (test-npm-init) test version: (0.0.0) 0.0.1 description: test ...... About to write to /.../package.json: { "name": "test", ....... } Is this ok? (yes) yes npm WARN package.json
[email protected]
No README.md file found! $ npm install grunt-contrib-cssmin -- savedev npm WARN package.json
[email protected]
No README.md file found! npm http GET https://registry.npmjs. org/grunt-contrib-cssmin npm http 200 https://registry.npmjs. org/grunt-contrib-cssmin
[email protected]
node_modules/grunt ├──
[email protected]
....... └──
[email protected]
(
[email protected]
)
[email protected]
node_modules/grunt-contrib-cssmin ├──
[email protected]
(zlib-
[email protected]
) └──
[email protected]
(
[email protected]
)