一、什么是gulp？
gulp是一种比较受欢迎的前端自动化构建工具，它基于Nodejs流，可协助开发人员进行任务管理，减少IO操作。详细了解gulp可访问中文官方网址: https://www.gulpjs.com.cn/
二、自动化与工程化
要想弄清为什么要使用gulp，我们还是要先为大家介绍一下自动化和工程化的概念：
前端自动化：借助于某些工具，监听用户操作，完成自动编译（sass，less），自动合并（css，js），自动刷新、部署、同步等操作。它可以提高开发效率，避免开发人员进行某些重复、繁琐的工作。
前端工程化：直接给出美团团队给出的定义 – 前端工程化是根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是让前端开发能够“自成体系”，最大程度地提高前端工程师的开发效率，降低技术选型、前后端联调等带来的协调沟通成本。
有些人习惯将自动化和工程化统称为一个概念，我认为是有失偏颇的。工程化是一个比自动化更为泛化的概念,它强调的是团队合作，规范和前端独立。自动化更加侧重的是简化操作，项目管理。
在了解了什么是自动化和工程化以后，或许我们现在可以给gulp一个更为具体的定义，gulp就是一种前端自动化工具。当然，考虑到其众多的插件在团队合作，前端服务方面也有所涉及，你也可以称它为前端工程化工具。
三、安装和入门
既然gulp是一种工具，那么要想使用它就需要下载安装到自己的电脑。它是基于nodejs流的，而nodejs又与npm包管理天然共生，所以gulp作为npm的一个依赖包可以直接使用npm下载安装。
安装到全局环境下
npm install --global gulp 确定是否安装成功
gulp --version本地新建项目test，切换到目录下。初始化npm依赖配置文件 package.json
npm init点击回车，所有初始配置默认。将gulp安装依赖到本地项目
npm i gulp --D 配置gulp文件，项目目录下新建gulpfile.js。
let gulp = require("gulp");// 按commonjs规范引入
gulp.task("default",()=>{
console.log("default task run!");
})default 任务会在执行gulp命令时默认执行。启动执行以上代码，可以使用命令 gulp 或 gulp default.
gulp task的名字支持我们进行自定义，它会执行回调函数内的命令。如执行命令gulp hello,以下代码会输出 hello
gulp.task("hello",()=>{
console.log("hello");
})
如果我们有多个自定义任务需要执行，可以使用以下这种方式：
let gulp = require("gulp");
gulp.task("hello",()=>{
console.log("hello");
})
gulp.task("add",()=>{
console.log(1+2);
})
gulp.task("default",["hello","add"])在当前目录下直接执行gulp就可执行hello和add内代码。
文件复制
copy单个文件到指定目录:
项目根目录下新建index.html文件 , gulpfile.js中代码如下:
gulp.task("copy:index",()=>{
// pipe() 管道 可以传入一个参数作为目标 gulp.dest()会保存到对应文件夹
return gulp.src("index.html").pipe(gulp.dest("dist"))
})
gulp.task("default",["copy:index"])执行命令gulp,会在当前目录新建dist目录，并copy index.html到该目录下。一般dist文件夹代表的是我们线上环境使用的代码。
gulp.src() 根据路径获取源文件流
.pipe() 管道 处理各种输入流并支持输出到指定目录
gulp.dest() 将文件流输出到指定目录
gulp还可以根据文件类型匹配多个文件并进行操作。下面代码是复制多个图片文件到dist目录下：
gulp.task("copy:images",()=>{
return gulp.src("images/*.png").pipe(gulp.dest("dist/images"));
})
gulp.task("default",["copy:images"])pipe()方法就是一个管道，将文件流从一个目录输出到另一个目录。
操作多种后缀名文件：
gulp.src('images/*.{jpg,png}') //获取.jpg .png 类型文件流操作指定文件夹下所有文件：
gulp.src("images/**/*")*/表示当前images文件夹下所有的内容.
操作多个文件夹下的不同文件：
gulp.src(['json/*.json','xml/*.xml']);排除某个或某种文件：
return gulp.src(['xml/*.xml','json/*.json','!json/secret.json']).pipe(gulp.dest('dist/data'))使用逻辑符号!可排除某些暂时不想操作的特殊文件。以上代码代表将xml下所有.xml文件以及json文件夹下所有.json文件复制到dist下的data文件夹，但不包括json下的secret.json.
文件合并
gulp.task("merge",()=>{
return gulp.src(["xml/*.xml","json/*.json"]).pipe(gulp.dest("dist/data"));
});
gulp.task("default",["merge"]);上面代码可以将不同文件夹下的文件合并到同一个文件夹下。不过我们最常用到的操作是将多个文件合并到某个单文件中。例如多个js，css文件的压缩合并等。在后续介绍gulp插件时我们将给出示例。
文件监听
gulp自带监测文件变化的方法 gulp.watch() 调用方法如下：
gulp.watch(targetFileUrl,taskNames);
gulp.task('watch',()=>{
gulp.watch('index.html',['copy:index']);
gulp.watch('images/**/*',['copy:images']);
gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['merge']);
})我们可以使用gulp watch 命令启动监听，当我们在项目根目录下操作index.html等文件时，gulp监听到文件修改就会执行相应的命令，将修改过的文件重新copy到dist线上目录下。这样可以省去开发人员修改完成后的复制操作，也可避免因为遗忘造成的损失。
在学习了上述内容后，可以说我们对gulp有了一个初步的了解，但是gulp真正的强大之处并不在于此，而是在于其丰富的插件。下一篇文章我们会和大家一起学习如何使用这些插件。