More Related Content
Similar to Grunt前端自动化工作流 (20)
Grunt前端自动化工作流
- 3. 01 Grunt前端自动化工作流
【目录】
(1). Grunt这货是啥?
(2). Grunt能帮我们干啥?
(3). Grunt安装配置
(4). 开始一个例子
(5). Grunt使用总结
3
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日星期二
- 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日星期二
- 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日星期二
- 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日星期二
- 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日星期二