前端工做流程自动化——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/