前端工作流程自动化——Grunt/Gulp 自动化
前端工作流程自动化——Grunt/Gulp 自动化
Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的前端自动化构建工具。
那么问题来了,Grunt和Gulp到底哪家强?在回答这个问题前,先给大家看一组下面的数据:
再看看实现同样功能的配置代码:
作者本人之前一直使用Grunt来做自动化构建的,在Gulp出来后,经过一段时间的试用感觉配置比Grunt方便多了,如果你两者还没接触过,本人推荐直接使用Gulp,毕竟简单实用门槛低才是硬道理,相比Grunt,Gulp具备以下优点:
●配置更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码;
●易学,核心API只有5个,通过管道流组合自己想要的任务;
●一个插件只完成一个功能, 这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。
当然也有劣势:
●相对Grunt而言,插件相对较少;
●自动化可配置性不够Grunt强。
●基于目前重构/前端的工作内容,需用到自动化功能大多数还是文件的处理,如压缩,合并,打包、检测、构建……,以上提到的两点劣势在目前的工作层面感受不明显,况且Gulp出现的目的是希望能够取代Grunt,成为最流行的自动化任务运行器。
Gulp能为我们做什么?以下这张图可以告诉你(包括但不限于)
Gulp的安装配置
由于文章篇幅的考虑,这里就不把 Gulp的安装配置展开讨论,大家有兴趣可以看看小李刀刀的 前端构建工具 Gulp.js 上手实例 。里面有详细的介绍及上手实例。
Gulp在项目里的实践
1.开始一个项目(gulp init-simple)
新建一个项目文件夹,并把预设的目录及文件拷贝到新建的项目文件夹里。
2.启动文件变更检测服务(gulp watch)
开始编码前先执行启动服务,打开http://localhost:8080查看页面,当项目里的 .html/.css/.js 文件发生变更时,浏览器自动对当前打开的 http://localhost:8080 下的页面进行耍新。
3.线上版本编码构建(gulp build-all)
项目代码上线前的构建,这里的操作主要有:压缩所有的图片文件,html文件相对路径改为绝对路径,html文件编码转换,CSS/JS压缩并合并,所有处理过后的文件存放dist目录。
另分享很棒的Gulp 速查手册。
想了解Grunt的朋友也可以直接开始学习咯!
Grunt-beginner前端自动化工具相应视频课程:
在本课程的学习中,你可以学到以下知识:
1. Grunt工具和插件的安装
2. 如何进行项目配置
3. 如何配置任务
4. 如何执行任务
5. Grunt的使用
课程地址:http://www.imooc.com/view/30
参考链接:
Grunt: The JavaScript Task Runner
http://gruntjs.com/
gulp.js – the streaming build system
http://gulpjs.com/
前端工作流程自动化——Grunt/Gulp 自动化相关推荐
- 使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
- python和ansible自动化网络安全工作流程
Often times, when discussing automation strategies, the topic of Python vs Ansible comes up. However ...
- python工作技巧_4个基本的 Python 技巧让你的工作流程自动化
说实话,即使是简单的任务也需要大量的时间和大量的依赖管理,这可能会变得非常复杂. 尽管如此,让一些简单的任务自动化是非常值得的,即使它更多的是为了好玩. 对于那些已经是 Python 爱好者的人来说, ...
- 通过Tomtit实现Perl6开发工作流程的自动化
Tomtit是一个全新的Perl6任务运行器,可让你很便捷地自动执行日常任务. Perl6的开发如何做到自动化?只需要一个应用Tomtit. Tomtit是一个全新的Perl6任务运行器,可让你很便捷 ...
- 使用Tand自动化您的机器学习工作流程
This is a post on TanD, a no-code framework to automate the machine learning workflow. Its purpose i ...
- RPA机器人能做什么?自动化办公、简化工作流程……还有很多事情等着你挖掘
看到这篇文章,首先我要恭喜你,因为我会带领你进入一个全新的领域,这将极大地方便你的日常工作和生活. 你听说过RPA吗?也许你会认为这是一个非常陌生的名词,但它可能会改变你的工作方式,提高你的工作效率! ...
- DocuWare 文件管理与工作流程自动化案例研究——DocuWare 工作流程功能使在家工作的员工能够保持沟通和高效工作,支持混合环境
公司名称:Lohmiller & Company /Carrier West 所在地: 美国 行业: 服务提供商 部署方式: 混合 部门: 应付账款,信贷部,人力资源部,收发部,保修科,商业销 ...
- DocuWare平台——用于文档管理和工作流程自动化的内容服务平台详细介绍(上)
DocuWare平台--用于文档管理和工作流程自动化的内容服务平台 成功实现办公自动化所需的一切 DocuWare 是一个先进的平台,可让您集中.快速.有效地管理.处理和利用业务信息. 我们的文档管理 ...
- Mac 自动化自动操作工作流程(Workflow)完成日常软件文件网页一键打开
进入软件<启动台>,找到<自动操作>工具(其他),打开,点击下方<新建文稿>. 提示选择文稿类型,选<工作流程>,点<选取>进入新建. 1. ...
最新文章
- qt 实现窗口局部镂空,并截图显示。
- 时间戳转换成时间格式
- .size .shape .size() type的运用
- docker基础——关于安装、常用指令以及镜像制作初体验
- 微课|Python程序设计开发宝典(5.1.2节):函数嵌套定义1
- 架构师Jack专访:全面认识软件测试架构师
- Zookeeper 安装部署
- Jmeter中Websocket协议支持包的使用 (转)
- Java- Math类
- 2011年1月31日nod32id,nod32免费激活码_NOD32用户名密码
- ClickHouse第四讲-表引擎
- friends105. The One with the East German Laundry Detergent
- Mac 苹果电脑创建一个新的管理员账号
- 下一个十年:数据信仰与认知智能
- 数字图像处理实验八图像的傅里叶变换
- svn提交报错Unexpected HTTP status 413 'Request Entity Too Large' on
- 【VMCloud云平台】SCAP(四)租户(二)
- 渗透测试 对头像上传漏洞检测与修复
- 数学建模之层次分析法AHP
- 你眼中的未来,是我们回不去的曾经
热门文章
- 华为的鸿蒙系统是海思_全新12.9英寸华为MatePad平板曝光:搭载鸿蒙系统
- 移动互联网APP测试流程及测试点(转载) (二)
- (数据库系统概论|王珊)第七章数据库设计-第二节:需求分析
- Linux系统编程30:进程信号之产生信号的四种方式(Core Dump,kill,raise)
- 操作系统实践(四/五)
- C语言,两个超大整型数乘法
- 汇编语言:实验7寻址方式在结构化数据访问中的应用
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
- IDEA引入外部jar包的方法
- 【计算几何】FZU Problem 2270 Two Triangles