Downloaded 24 times
Grunt前端自动化工作流
- 1.
- 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.
- 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.
- 10.
- 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.
- 19.
- 20.
- 21.
- 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.
- 25.