Grunt前端自动化工作流

  • 1,395 views
Uploaded on

Grunt test

Grunt test

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,395
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 1 13年7月2日星期二
  • 2. Grunt前端自动化工作流 Sonic    2013.7.3 2 13年7月2日星期二
  • 3. 01 Grunt前端自动化工作流          【目录】 (1).  Grunt这货是啥? (2).  Grunt能帮我们干啥? (3).  Grunt安装配置 (4).  开始一个例子 (5).  Grunt使用总结 3 13年7月2日星期二
  • 4. 01 Grunt这货是啥? Grunt 基于任务的命令行构建工具。     官方网站:http://gruntjs.com 4 13年7月2日星期二
  • 5. 01 Grunt这货是啥? Grunt 5 插件丰富,社区活跃 谁在用? 13年7月2日星期二
  • 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. Grunt能帮我们干啥? 我们先想像下面的场景 编辑器coding  =>  切换到浏览器F5  =>  编辑器coding    =>  切换到 浏览器F5  =>  编辑器coding  =>  切换到浏览器F5  =>  编辑器 coding    =>  切换到浏览器F5   7 项目开始前 编码中 编码完成 02 13年7月2日星期二
  • 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. 01 腾讯TGIDEAS设计团队 9 重复而枯燥的工作太多了,生命就这样浪费…… 13年7月2日星期二
  • 10. Grunt能帮我们干啥? 我们需要一个自动化的工作流程 Grunt  集项目结构生成(Grunt-init)  html压缩、jsHint代码风格检查、JS/CSS压缩合 并、img图片压缩优化、JS单元测试等任务自动化功能,在node.js环境下,一行命令搞 定! 10 HTML压 缩压缩 JS压缩 压缩 CSS压缩 image图 片压缩 02 13年7月2日星期二
  • 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. 从官网下载  packge.json    Gruntfile.js    文件并进行修改配置 03 Grunt安装配置 配置grunt 12 package.json //项目自动化所依赖的相关插件。 Gruntfile.js //项目自动化工作流配置文件,重要 13年7月2日星期二
  • 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. 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. 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. 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. 实例(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. Gruntfile.js 03 Grunt安装配置 配置grunt 18 13年7月2日星期二
  • 19. Gruntfile.js 03 Grunt安装配置 配置grunt 19 任务配置 13年7月2日星期二
  • 20. Gruntfile.js 03 Grunt安装配置 配置grunt 2019 加载模块 13年7月2日星期二
  • 21. Gruntfile.js 03 Grunt安装配置 配置grunt 21 定义任务组合 13年7月2日星期二
  • 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. 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. 01 FAQ 24 Grunt前端自动化工作流 13年7月2日星期二
  • 25. 25 13年7月2日星期二