大家好，我是IT修真院深圳分院第01期学员，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网JS（职业）任务5，深度思考中的知识点——如何使用gulp？
1. 背景
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 它能自动化地完成javascript/coffee/sass/less/html /image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
2. 方法
2.1 安装gulp
首先安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
2.1.1 安装nodejs
node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。
npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。
2.1.2 全局安装gulp
npm install -g gulp 使用npm全局安装gulp
gulp -v 查看版本
进入项目根目录建立一个package.json(package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件)
可以使用npm init - y 自动设置
2.1.3 本地项目安装gulp和插件
定位目录命令后：
npm install gulp --save-dev 本地安装gulp
npm install name --save-dev 安装插件
2.1.4 配置gulpfile.js
//引入组件
var gulp = require('gulp'),
uglify = require('gulp-uglify');//压缩文件插件
//创建任务
//gulp.task(name,[deps], fn)
//name 为任务名
//deps 是当前定义的任务需要依赖的其他任务
//fn 为任务函数
gulp.task('jsmin', function () {
gulp.src('demo.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
3. 常见问题
如何使用gulp
4. 解决方案
以上
5. 编码实战
上传为demo文件夹，使用webstorm打开，右键gulpfile.js，选择show gulp tasks，双击任务运行。
6. 扩展思考
gulp常用的的API：task，run，watch，src和dest
6.1、gulp.src(globs,[options])
输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options为可选参数。通常情况下我们不需要用到。
6.2、gulp.dest(path,[options])
gulp.dest()方法是用来写文件 path为写入文件的路径，如果文件夹不存在，将会自动创建它。
options为一个可选的参数对象，通常我们不需要用到。
6.3、gulp.task(name,[deps], fn)
用来定义任务，name 为任务名。
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
6.4、gulp.watch(glob,[opts], tasks)
glob 为要监视的文件匹配模式，用来指定具体监控哪些文件的变动。
opts 为一个可选的配置对象，通常不需要用到。
tasks 为文件变化后要执行的任务，为一个数组。
6.5、gulp.run(tasks...)尽可能多的并行运行多个task。
理想的写法是能控制哪些任务串行执行，哪些任务并行执行。
解决办法：
每个需要依赖其他任务的任务写依赖。
使用插件
gulp的当前最新、未正式发布版本gulp 4.0也提供了新的API(series、parallel)来解决这个问题。
series里的任务是顺序执行的，parallel里的任务是同时执行的。
7. 参考文献
8. 更多讨论
grunt、webpack的使用
鸣谢
感谢大家观看
BY : 王蒙
视频链接
------------------------------------------------------------------------------------------------------------------------
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
