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
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
150
NPOでのDevinの活用
codeforeveryone
0
750
CursorはMCPを使った方が良いぞ
taigakono
1
220
技術同人誌をMCP Serverにしてみた
74th
1
610
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
650
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
5つのアンチパターンから学ぶLT設計
narihara
1
150
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
14
9.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
700
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
740
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Code Reviewing Like a Champion
maltzj
524
40k
The Language of Interfaces
destraynor
158
25k
Side Projects
sachag
455
42k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Optimizing for Happiness
mojombo
379
70k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
346
40k
Being A Developer After 40
akosma
90
590k
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]
)