Grunt安装配置教程:前端自动化工作流

    文章来源:中国互联 更新时间:2013-8-2 9:19:11
分享:

Grunt这货是啥?

最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com

Grunt能帮我们干啥?

在开始介绍前,先向大家描述下面的场景:

【场景1:项目开始前】

1 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟)

2 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuery jQuery插件 ) 进相应目录(拷贝 N个文件,花费N分钟)

3 再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… (建N个文件,花费N分钟)

【场景2:编码中】

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

键盘就这样杯具了….

【场景3:编码完成】

1 HTML去掉注析、换行符 – HtmlMin

2 CSS文件压缩合并 – CssMinify

3 JS代码风格检查 – JsHint

4 JS代码压缩 – Uglyfy

5 image压缩 – imagemin

在一个项目过程中,重复而枯燥的工作太多了….

在线咨询
  • 在线时间
  • 8:00-21:00
Grunt安装配置教程:前端自动化工作流-中国互联

Grunt安装配置教程:前端自动化工作流

    文章来源:中国互联 更新时间:2013-8-2 9:19:11
分享:

Grunt这货是啥?

最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com

Grunt能帮我们干啥?

在开始介绍前,先向大家描述下面的场景:

【场景1:项目开始前】

1 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟)

2 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuery jQuery插件 ) 进相应目录(拷贝 N个文件,花费N分钟)

3 再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… (建N个文件,花费N分钟)

【场景2:编码中】

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

键盘就这样杯具了….

【场景3:编码完成】

1 HTML去掉注析、换行符 – HtmlMin

2 CSS文件压缩合并 – CssMinify

3 JS代码风格检查 – JsHint

4 JS代码压缩 – Uglyfy

5 image压缩 – imagemin

在一个项目过程中,重复而枯燥的工作太多了….

在线咨询
  • 在线时间
  • 8:00-21:00