前端构建工具gulp之基本介绍

1、基本介绍

　　gulp.js是一个自动化构建工具，是自动化项目的构建利器。可以对网站的资源进行优化，将开发过程中一些重复的任务通过执行命令自动完成。这样能很大的提高我们的工作效率。

　　gulp.js是基于Node.js构建的，利用Node.js流可以快速的构建项目，例如能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定等。

2、自动化构建工具

　　grunt : 也是基于Node.js的自动化任务运行器，它在I/O过程（计算机在存储器上读取数据和写入数据的过程）中会产生一些中间态的临时文件，基于临时文件再做处理生成最终的构建后的文件。grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以实现。

　　grunt工作方式是以文件为媒介来运行它的工作流的，比如执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务...就这样反复下去。

首先 grunt和gulp都是基于Node.js的自动化构建工具，但是它们还是很大区别的。grunt和gulp的比较：

　　a.使用性：gulp比grunt更简洁，采用代码优于配置策略，维护gulp更像是写代码，而grunt更像是在写配置

　　b.构建效率：gulp比grunt更高效，gulp利用流的方式处理文件，通过管道将多个任务和操作连接起来，只有一次I/O的过程，而grunt是通过I/O过程产生一些临时文件，基于临时文件再做处理。

　　c.构建质量：gulp比grunt构建质量更高，gulp的每个插件只完成一个任务，分工明确，各个功能通过流进行整合并完成复杂任务，促进插件的可重用性。而grunt一个插件可以实现多个功能。

　　d.易学程度：gulp比grunt更容易学，gulp的核心api只有5个，然后通过管道流组合成自己想要的任务。

　　FIS3 : 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。这是百度的前端团队前端工程化经验的总结。gulp轻量级，想要实现什么功能，就安装什么插件；而FIS3必须以项目的形式运行，内置集成了大部分常用的插件，拥有一套比较强大的解决方案。

　　webpack:是一种模块化的解决方案,是文件打包工具。和glup/grunt没有可比性，只是有相似的功能。它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

　　webpack的工作方式把项目当做一个整体，通过一个给定的主文件，Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

　　每种工具都有其存在的意义，各有各的优势和缺点，我们要结合我们项目的实际情况和需求选择合适的构建工具。结构简单的中小型项目用gulp实现基本操作就足够了，下面主要介绍gulp的使用。

3.gulp的安装

第一步：安装Nodejs；首先，gulp是基于Node.js构建的，所以首先要安装Nodejs,执行命令行 node  -v,查看版本号，查看是否已安装Nodejs；

　　

第二步：全局安装gulp；使用npm(包管理工具)安装插件，先全局安装gulp,执行命令 npm install gulp -g （-g表示全局安装），全局安装为了可以运行命令行，执行gulp任务；

第三步：新建package.json文件；在你项目的根目录下新建package.json文件（注意里面不能写注释） 执行命令 npm init

　　

第四步：本地安装gulp插件； 在你的项目内安装gulp插件，执行命令 npm install gulp --save-dev，本地安装是为了脚本依赖，调用gulp插件功能；

　　

第五步：新建gulpfile.js文件（配置文件），文件名不能更改，例如在里面执行简单的任务；

　　

第六步：运行gulp