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

gulp是继grunt之后的后起之秀，主张代码优于配置，api简单方便，基于流进行操作，快捷方便。目前各大型网站都使用到了这个技术。

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程序没有差别。

前端工程师不仅要html、css、js技术过硬，更要求对国内外知名实用的一些框架、工具了解透彻以及更高效的应用到项目中。

gulp是基于Nodejs的自动任务运行器，

它能自动化地完javascript、coffee、sass、less、html、image、css

等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本节课，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。Gulp的中文官网: http://www.gulpjs.com.cn/.

gulp前端自动化开发课程如何讲授

主要突出以下几点：

第一，循序渐进。本课程先从基础讲起，讲解gulp的简单的API。

第二，项目驱动。全程以项目来驱动知识点的学习，让我们看到gulp在实践项目中的强大以及实用性。

第三，注重实战。学生在听完讲师的课堂面授后，要亲自动手完成另一个新项目。

gulp前端自动化项目开发课程，主要由以下几部分组成：

第一， gulp是什么以及gulp的作用

第二， nodeJS环境的安装以及包管理器npm的使用

第三， gulp的安装以及4个API的详细讲解

第四， 常用的gulp插件安装以及使用

第五， 在实际的工作项目中应用gulp

具体内容如下：

第一部分

gulp是什么以及gulp的作用。

本部分主要包含三个方面：

gulp是什么：

gulp就是一个基于流，代码优于控制的构建工具。

gulp的作用：

第一， 自动压缩JS文件。

第二， 自动压缩CSS文件。

第三， 自动合并文件。

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

第五， 自动压缩图片。

第六， 自动刷新浏览器。

等等。

第二部分

nodeJS环境的安装以及包管理器npm的使用。

nodeJS环境的安装：

官方网址：http://nodejs.cn/

node.js是一个javascript运行环境，实际上它对GoogleV8引擎进行了封装，V8引擎执行javascript的速度非常快，性能非常好。Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作，幸运的是，nodejs库和框架为我们提供了帮助，让我们减少工作量，但是成百上千的库或者框架管理起来又很麻烦，有了npm，可以很快的找到特定服务要使用的包，进行下载，安装以及管理已经安装的包。

包管理器npm的使用：

全称是node package manager ，是随同nodejs一起安装的包管理和分发工具，它很方便让javascript开发者下载，安装，上传以及管理已经安装的包。成为了非官方的发布node模块（包）的标准。使用npm，必须安装nodejs。

Package.json文件的作用：npm的配置文件，当有一个新的项目需要建立，或者有人跟你合作开发时，我们不需要把项目中所有用到的模块（文件大小可能上百兆）都上传到git,只需要给项目带上一个配置文件，而对方拿到项目后，只需要一个命令npm

install，node就可以自动读取项目的配置文件，并将所有依赖模块自动下载。

第三部分

gulp的安装以及4个API的详细讲解。

gulp的安装：

基于nodejs，需要先安装node环境，安装完成后，打开命令窗口，输入：node –v

检测一下node是否安装好。全局安装gulp的命令：npm install –global

gulp。作为项目的开发依赖（devDependencies）安装gulp的命令：npm install –save-dev gulp。

4个API的详细讲解：

gulpfile.js文件：这是gulp的配置文件，放在项目根目录下。

第一， 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())。

你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方法：使用一个callback,或者返回一个promise或stream。

第四， 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

1. 在你所喜欢的磁盘中创建项目文件夹。在项目文件夹中创建两个新的文件夹，dist(目标文件夹，也就是通过gulp处理之后的问价)和src(源文件夹，也就是通过gulp要处理的一些文件)。

先安装nodejs环境，安装完成后打开cmd命令进入你的项目文件夹检查是否成功安装nodejs，利用node –v命令查看node版本号，如果显示出来版本号，说明安装node成功。

2．用npm init命令进行初始化。会引导你创建一个package.json文件，包括名称、版本、作者等信息。这时在你的项目文件夹中会多一个package.json文件

这时候package.json文件中的内容就是你在命令行中设置的一些选项。

3. 安装gulp：全局安装gulp（npm install –g gulp）以及局部安装gulp（npm install --save-dev gulp/npm install –D gulp）。

全局安装：

局部安装：

安装的同时，将信息写入package.json中，项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies（项目上线以后依赖的包）配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了。

安装成功之后，这时候你的项目文件夹中会出现一个node_modules的文件夹以及package.json文件中devDependencies选项中会显示你安装好的gulp的版本号。

4. 安装gulp插件：安装好gulp之后，在项目中安装你所用到的gulp插件。所用到的命令：npm install –D

name(name表示你所需安装的插件的名称，与安装gulp类似)。安装成功后会自动在package.json文件中的devDependencies中显示。例如：

5. 配置gulpfile.js文件

在你的项目文件夹中新建一个gulpfile.js文件。

第一， 载入外挂，通过require把所需要用到的插件引入进来。

第二， 利用gulp.task()API创建任务（例如压缩，合并，即时刷新等）。

1. 编译sass文件和压缩css任务

继续下去之前，一个小小的说明。

这个gulp.taskAPI用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。

利用sass这个插件把所有的sass文件编译成压缩后的对应的css文件

使用pipe()来串流来源档案到某个外挂。利用合并插件把所有的经过处理的css文件合并到一个文件中去，并重新命名为main.css.

这个gulp.dest()API是用来设定目的路径。一个任务可以有多个目的地，一个用来输出扩展的版本，一个用来输出缩小化的版本。

我建议阅读gulp的API文件，以了解这些函式方法。它们并不像看起来的那样可怕！

2. 压缩js任务

这个gulp.srcAPI用来定义一个或多个来源档案。允许使用glob样式，例如/**/*.scss比对多个符合的档案。传回的串流(stream)让它成为非同步机制，所以在我们收到完成通知之前，确保该任务已经全部完成。

3. 压缩图片任务

4. 压缩html以及重命名任务

5. 即时刷新浏览器任务

也可以简写

6. 开启自动刷新服务任务(监听数据的变化)

首先需要利用connect.server开启一个服务，把配置项livereload选项设置为true.

为了能够监听一些文件的变化，并在更动发生后执行相关任务，首先需要建立一个新的任务，使用gulp.watchAPI来监听数据的变化:

透过gulp.watch指定想要监听的文件，并且透过相依任务阵列定义任务。执行$ gulp watch来开始监听文件，任何.scss、.js或图片任务一旦有了更动，便会执行相对应的任务。

如果有疑问，大家可以到gulp的官网上查看详细的api是使用方法。

整个文件的配置如下：

6. 配置完成之后，在命令行中输入gulp命令

执行命令之后在你的项目文件夹会变成上述的状态。这时候说明你写的代码是没有问题的，在浏览器中打开localhost:8080/main.html即可查看页面效果。如果效果实现了，则说明你的项目完成了！

以上就是我们gulp前端自动化工具课程的全部讲解了，以后大家在以后的工作过程中尝试去用它，多练习。相信gulp会让你的工作更加高效快捷。

编辑：千锋HTML5