Gulp前端自动化工具

      gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp的特点：

第一， 易用。 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。

第二， 高效。 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。

第三， 高质量。 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。它表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。

第四， 易学。 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

第五， 流。 使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。

第六， 代码优于配置。 维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。

gulp的作用：

第一， 自动压缩JS文件。

第二， 自动压缩CSS文件。

第三， 自动合并文件。

第四， 自动编译Less/Sass源文件。

第五， 自动压缩图片。

第六， 自动刷新浏览器。

gulp的API：

第一， gulp.src(globs[,options])：输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件，将返回一个Vinyl files的stream(虚拟的文件流)， 它可以被piped到别的插件中。

globs参数：类型为string或array，所要读取的glob或者包含globs的数组。

options参数：类型为object，具体使用方法参考官方文档。

 

第二， gulp.dest(path[,options])：能被pipe进来，并且将会写文件，并且重新输出（emits）所有数据，因此你可以将它pipe到多个文件夹。如果文件夹不存在，将会自动创建它。

path参数：类型为string或function,文件将被写入的路径（输出目录），也可以传入一个函数，在函数中返回响应路径。

options参数：类型为object，具体使用方法参考官方文档。

 

第三， gulp.task(name[,deps],fn):建立一个任务。

name参数：任务的名字，如果你需要在命令行运行你的某些任务，那么，请不要在名字中使用空格。

deps参数：类型为array，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn参数：该函数定义任务所要执行的一些操作，通常来说，它会是这种形式：return gulp.src().pipe(someplugin())。

 

第四， Gulp.watch(glob,tasks)：监视文件，并且可以在文件发生改动时候做一些事情，它总会返回一个EventEmitter来发射（emit）change事件

glob参数：类型为string或者array，一个glob字符串，或者一个包含多个glob字符串的数组，用来指定具体监控哪些文件的变动。

tasks参数：类型array，需要在文件变动后执行的一个或者多个通过gulp.task()创建的task的名字。

 

第五：pipe():使用pipe()来串流来源档案到某个外挂，类似于一个通道，通过 gulp.src把一个文件通过pipe()串流到药执行的压缩合并等操作之后再 串流到目标文件夹中。

gulp常用的插件：

第一：文件才重命名插件gulp-rename: npm i –D gulp-rename。

第二：Js文件压缩插件gulp-uglify：npm i –D gulp-uglify。

第三：Css文件压缩插件gulp-clean-css：npm i –D gulp-clean-css。

第四：Html文件压缩插件gulp- imagemin：npm i –D gulp- imagemin。

第五：Html文件压缩插件gulp-minify-html：npm i –D gulp-minify-html。

第六：Js/css文件合并插件gulp-concat：npm i –D gulp-concat。

第七：自动刷新插件gulp-connect：npm i –D gulp-connect。

 gulp的安装：

      基于nodejs，需要先安装node环境，安装完成后，打开命令窗口，输入：node –v 检测一下node是否安装好。全局安装gulp的命令：npm install –global gulp。作为项目的开发依赖（devDependencies）安装gulp的命令：npm install –save-dev gulp。

 

Gulp的中文官网: http://www.gulpjs.com.cn/.

 

参考：http://www.sohu.com/a/243451182_647584