gulp,英文的意思是吞咽 （英 [gʌlp]） （ 美 [ɡʌlp] ），具体读啥大家自己看音标。
Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
以上应该是所有的主流打包，构建工具都支持的功能。
当然Gulp能做的远不止这些。如果你够疯狂，你甚至可以使用它搭建一个静态页面生成器。
基于本人水平的限制，这篇博客的目的是帮助大家了解Gulp的基础用法，让大家能看懂gulp的配置。
类似Gulp的工具，我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt，以及后起之秀Webpack，这么说其实不是很准确，Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
官方对webpack的定位是模块打包器，而gulp/grunt属于构建工具。他们功能是有重叠的地方，但从本质上来讲不是一种东西。
说回来，为什么是Gulp，效率的东西先不谈，单说难易程度，gulp的配置文件更加的简洁，配置的写法逻辑对前端工作人员更加的友好。而且基于unix的pipe思想，在编写构建任务代码让人感觉非常舒服的，更利于开发人员的维护和阅读。
安装Gulp之前你需要先安装Node.js。
安装完Node.js，使用cmd，用下面命令安装Gulp
npm install gulp -g
-g表示全局安装，这样你在电脑上任何位置都能只用gulp 命令。
下面我带大家从头到尾创建一个基于gulp的项目。
首先，我们新建一个project文件夹，并在该目录下执行
npm init
npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
{
"name": "gzy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
创建完之后，我们执行下面的命令：
npm install gulp --save-dev
这一次，我们局部安装Gulp。使用–save-dev，将通知计算机在package.json中添加gulp依赖。
{
"name": "gzy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.0"
}
}
我们使用通用的webapp目录结构，dist文件夹用来存放生产环境下的内容。
（你需要先在根目录下创建一个gulpfile.js文件）。
先创建个简单的task
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello World!');
});
然后我们用webstorm或vscode打开我们创建的project项目。
这是一个简单的task，但是正常使用的task也就比这个复杂一丢丢。
下面用编译Sass来举例子。
我们使用gulp-sass插件来编译Sass。
安装插件的步骤是这样的：
npm install gulp-sass --save-dev
在gulpfile中引入插件，用变量保存，并使用
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('hello', function() {
console.log('Hello World!');
});
gulp.task('sass', function(){
return gulp.src('source-files')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('destination'))
});
我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹，里面有个styles.scss文件。
这个文件将在gulp.src中用到。
sass处理之后，我们希望它生成css文件并产出到app/css目录下，可以这样写：
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
原来的目录：
指令完成后的指令：
styles.css是gulp智动为我们生成的。
在这个例子中我们是设置指定的目标文件：gulp.src(‘app/scss/styles.scss’)，但文件多了，不可能一一在后面列出目标文件，这就不得不提Node中的通配符。
通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。
使用通配符，计算机检查文件名和路径进行匹配。
大部分时候，我们只需要用到下面4种匹配模式：
gulp提供和grunt一样的watch方法，对各种任务进行监听操作。
具体的语法如下：
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
通常我们监听的还不只是一个文件，把它变成一个任务：
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
上面的写法在新版的gulp已经不支持了。
gulp.task('watch1', function(){
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// Other watchers
})
执行gulp watch命令。
有了监听，每次修改文件，Gulp都将自动为我们执行任务。
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器。
npm install browser-sync --save-dev
这里没有gulp-前缀，因为browser-sync支持Gulp，所以没有人专门去搞一个给Gulp用。
我们创建一个broswerSync任务，我们需要告知它，根目录在哪里。
我们先在头部应用需要的依赖。
var browserSync = require('browser-sync').create();
我们稍微修改一下之前的代码 sass1任务，让每次css文件更改都刷新一下浏览器：
gulp.task('sass1', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
然后我们监听html是否发生变化，如果变化重新渲染页面代码如下：
gulp.task('watch1',gulp.series('sass1',function(){
browserSync.init({
server: "./app"
});
gulp.watch('app/scss/**/*.scss', gulp.series('sass1'));
gulp.watch("app/*.html").on('change', browserSync.reload);
}));
gulp.series('sass1'----------
这种写法是 gulp4.xx才出的语法，以前是[‘a’,‘b’]这种写法，意思是指在执行下面function内的任务前优先任务 a 和 任务b，
现在在gulp4不支持这种写法，需要通过 gulp.series 和 gulp.parallel 的方式映入。
gulp.series：按照顺序执行
gulp.paralle：可以并行计算
gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
// Do something after a, b, and c are finished.
}));
gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
// Build the website.
}));
也可以混合使用：
gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles','scripts', 'images'), 'b', 'c', function() {
// Do something after a, b, and c are finished.
}));
到目前为止，我们做了下面三件事：
1.可运转的web开发服务
2.使用Sass预处理器
3.自动刷新浏览器