1
13年7月2日星期二
Grunt前端自动化工作流
Sonic	
  	
  2013.7.3
2
13年7月2日星期二
01 Grunt前端自动化工作流
          【目录】
(1).  Grunt这货是啥?
(2).  Grunt能帮我们干啥?
(3).  Grunt安装配置
(4).  开始一个例子
(5).  Grunt使用总结...
01 Grunt这货是啥?
Grunt
基于任务的命令行构建工具。    
官方网站:http://gruntjs.com
4
13年7月2日星期二
01 Grunt这货是啥?
Grunt
5
插件丰富,社区活跃
谁在用?
13年7月2日星期二
02 Grunt能帮我们干啥?
我们先想像下面的场景
1.  建立  proj  的文件夹  再建  html  css  js  images    (建5个或以上文件夹,花费1分钟)
2.  拷贝  CSS库(Yui...
Grunt能帮我们干啥?
我们先想像下面的场景
编辑器coding  =>  切换到浏览器F5  =>  编辑器coding    =>  切换到
浏览器F5  =>  编辑器coding  =>  切换到浏览器F5  ...
Grunt能帮我们干啥?
我们先想像下面的场景
8
项目开始前 编码中 编码完成
1.  HTML去掉注析、换行符        -  HTML压缩
2.  JS代码风格检查                   ...
01 腾讯TGIDEAS设计团队
9
重复而枯燥的工作太多了,生命就这样浪费……
13年7月2日星期二
Grunt能帮我们干啥?
我们需要一个自动化的工作流程
Grunt  集项目结构生成(Grunt-init)  html压缩、jsHint代码风格检查、JS/CSS压缩合
并、img图片压缩优化、JS单元测试等任务自动化功能,在node.j...
03 Grunt安装配置
安装grunt-cli
1.  自备node环境(>0.8.0),  npm包管理
2.  公司内网需配置代理才能正常  npm  install(公司网以外请忽略)
4.  卸载旧版本grunt(<0.4...
从官网下载  packge.json    Gruntfile.js    文件并进行修改配置
03 Grunt安装配置
配置grunt
12
package.json //项目自动化所依赖的相关插件。
Gruntfile.js //...
packge.json
03 Grunt安装配置
配置grunt
13
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1...
packge.json
03 Grunt安装配置
配置grunt
14
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1...
packge.json
03 Grunt安装配置
配置grunt
15
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1...
packge.json
03 Grunt安装配置
配置grunt
16
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1...
实例(projA)的packge.json
03 Grunt安装配置
配置grunt
17
{
"name": "projA",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1...
Gruntfile.js
03 Grunt安装配置
配置grunt
18
13年7月2日星期二
Gruntfile.js
03 Grunt安装配置
配置grunt
19
任务配置
13年7月2日星期二
Gruntfile.js
03 Grunt安装配置
配置grunt
2019
加载模块
13年7月2日星期二
Gruntfile.js
03 Grunt安装配置
配置grunt
21
定义任务组合
13年7月2日星期二
04 开始一个实例
projA  实例演示
22
1.  配置完  package.json完后,安装相对应的node模块
2.  启动文件变更监控(livereload)
3.  编码完成后Build
npm install
gru...
05 Grunt使用总结
总结:
1.  配置简单,配置文件Gruntfile.js是JS格式,比较贴近前端知识点。相对Ant之类基JAVA,
又于xml配置,学习成本低
2.  Grunt能为我们做的远不只这么多,很多Grunt插件待我们...
01
FAQ
24
Grunt前端自动化工作流
13年7月2日星期二
25
13年7月2日星期二
Upcoming SlideShare
Loading in …5
×

Grunt前端自动化工作流

1,814 views

Published on

Grunt test

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,814
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Grunt前端自动化工作流

  1. 1. 1 13年7月2日星期二
  2. 2. Grunt前端自动化工作流 Sonic    2013.7.3 2 13年7月2日星期二
  3. 3. 01 Grunt前端自动化工作流          【目录】 (1).  Grunt这货是啥? (2).  Grunt能帮我们干啥? (3).  Grunt安装配置 (4).  开始一个例子 (5).  Grunt使用总结 3 13年7月2日星期二
  4. 4. 01 Grunt这货是啥? Grunt 基于任务的命令行构建工具。     官方网站:http://gruntjs.com 4 13年7月2日星期二
  5. 5. 01 Grunt这货是啥? Grunt 5 插件丰富,社区活跃 谁在用? 13年7月2日星期二
  6. 6. 02 Grunt能帮我们干啥? 我们先想像下面的场景 1.  建立  proj  的文件夹  再建  html  css  js  images    (建5个或以上文件夹,花费1分钟) 2.  拷贝  CSS库(Yui  Reset  |    bootstrap) JS库(Requiet.js  |  Seajs  |    jQuery  |  jQuery插件  )  进相应目录?(拷贝  N个文件,花费N分钟) 2.  新建    html/index.html    js/comm.js    css/base.css    css/comm.css    css/module-A.css  ……  (建 N个文件,花费N分钟) 6 项目开始前 编码中 编码完成 13年7月2日星期二
  7. 7. Grunt能帮我们干啥? 我们先想像下面的场景 编辑器coding  =>  切换到浏览器F5  =>  编辑器coding    =>  切换到 浏览器F5  =>  编辑器coding  =>  切换到浏览器F5  =>  编辑器 coding    =>  切换到浏览器F5   7 项目开始前 编码中 编码完成 02 13年7月2日星期二
  8. 8. Grunt能帮我们干啥? 我们先想像下面的场景 8 项目开始前 编码中 编码完成 1.  HTML去掉注析、换行符        -  HTML压缩 2.  JS代码风格检查                                  -  JsHint 3.  CSS文件压缩合并                            -  CssMinify 4.  JS代码压缩                                                -  Uglyfy 5.  image压缩                                                -  imagemin 6.  JS功能点单元测试                            -  Qunit       02 13年7月2日星期二
  9. 9. 01 腾讯TGIDEAS设计团队 9 重复而枯燥的工作太多了,生命就这样浪费…… 13年7月2日星期二
  10. 10. Grunt能帮我们干啥? 我们需要一个自动化的工作流程 Grunt  集项目结构生成(Grunt-init)  html压缩、jsHint代码风格检查、JS/CSS压缩合 并、img图片压缩优化、JS单元测试等任务自动化功能,在node.js环境下,一行命令搞 定! 10 HTML压 缩压缩 JS压缩 压缩 CSS压缩 image图 片压缩 02 13年7月2日星期二
  11. 11. 03 Grunt安装配置 安装grunt-cli 1.  自备node环境(>0.8.0),  npm包管理 2.  公司内网需配置代理才能正常  npm  install(公司网以外请忽略) 4.  卸载旧版本grunt(<0.4.0)  (没装过请忽略) 3.安装grunt-cli 11 npm config set proxy=http://proxy.tencent.com:8080 npm config set registry http://registry.npmjs.vitecho.com npm uninstall grunt -g npm install grunt-cli -g 13年7月2日星期二
  12. 12. 从官网下载  packge.json    Gruntfile.js    文件并进行修改配置 03 Grunt安装配置 配置grunt 12 package.json //项目自动化所依赖的相关插件。 Gruntfile.js //项目自动化工作流配置文件,重要 13年7月2日星期二
  13. 13. packge.json 03 Grunt安装配置 配置grunt 13 { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 13年7月2日星期二
  14. 14. packge.json 03 Grunt安装配置 配置grunt 14 { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 项目名,版本 13年7月2日星期二
  15. 15. packge.json 03 Grunt安装配置 配置grunt 15 { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 插件名,版本 13年7月2日星期二
  16. 16. packge.json 03 Grunt安装配置 配置grunt 16 { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } } 插件名,版本 13年7月2日星期二
  17. 17. 实例(projA)的packge.json 03 Grunt安装配置 配置grunt 17 { "name": "projA", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-cssmin": "~0.6.1", "grunt-contrib-uglify": "~0.2.2", "grunt-contrib-imagemin": "~0.1.4", "grunt-regarde": "latest", "grunt-contrib-connect": "latest", "grunt-contrib-livereload": "latest" } } html压缩 CSS压缩 js压缩 image压缩 文件变更自动刷新 13年7月2日星期二
  18. 18. Gruntfile.js 03 Grunt安装配置 配置grunt 18 13年7月2日星期二
  19. 19. Gruntfile.js 03 Grunt安装配置 配置grunt 19 任务配置 13年7月2日星期二
  20. 20. Gruntfile.js 03 Grunt安装配置 配置grunt 2019 加载模块 13年7月2日星期二
  21. 21. Gruntfile.js 03 Grunt安装配置 配置grunt 21 定义任务组合 13年7月2日星期二
  22. 22. 04 开始一个实例 projA  实例演示 22 1.  配置完  package.json完后,安装相对应的node模块 2.  启动文件变更监控(livereload) 3.  编码完成后Build npm install grunt live grunt build 视频地址:http://dwz.cn/9b8lk 视频地址: http://dwz.cn/9b8pJ 视频地址:http://dwz.cn/9b8yw 13年7月2日星期二
  23. 23. 05 Grunt使用总结 总结: 1.  配置简单,配置文件Gruntfile.js是JS格式,比较贴近前端知识点。相对Ant之类基JAVA, 又于xml配置,学习成本低 2.  Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。        hmal  less  coffeeScript  dataURI  html2json 3.  每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己的自动化工 作流。 4.  Grunt团队很勤劳,社区活跃,Grunt-init  后续可能会由  Yeoman代替,有兴趣可以持续 关注。 23 13年7月2日星期二
  24. 24. 01 FAQ 24 Grunt前端自动化工作流 13年7月2日星期二
  25. 25. 25 13年7月2日星期二

×