gulp是什么？
Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。
gulp基于流的操作。
常见构建工具：Grunt，gulp，webpack，FIS..
gulp有什么用？
网页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，
可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。
gulp怎么用？
.以[email protected]为例
1.初始化npm
npm init
2.安装gulp
以全局方式安装gulp
npm install gulp -g
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行
想把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：
npm install gulp --save-dev
加上-dev为开发依赖，项目上线时不需要
不加-dev为生产依赖，项目上线时需要用到的包，例如express
3.建立gulpfile.js文件
gulp需要一个文件作为它的主文件，在gulp中这个文件叫做 gulpfile.js 的文件
放置在项目的根目录中，之后的gulp指令操作就在gulpfile.js文件中进行
4.引入gulp模块
var gulp=require(‘gulp‘);
5.使用gulp API
gulp总共4个API，1个管道
1. gulp.src(globs)入口文件路径
globs:具体路径，或多个路径的数组，也可以用字符来匹配我们想要的文件
*匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾**匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。?匹配文件路径中的一个字符(不会匹配路径分隔符)[...]匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法!(pattern|pattern|pattern)匹配任何与括号中给定的任一模式都不匹配的?(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?+(pattern|pattern|pattern)匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+*(pattern|pattern|pattern)匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*@(pattern|pattern|pattern)匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)- 下面以一系列例子来加深理解
*能匹配a.js,x.y,abc,abc/,但不能匹配a/b.js*.*能匹配a.js,style.css,a.b,x.y*/*/*.js能匹配a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js**能匹配abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件**/*.js能匹配foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.jsa/**/z能匹配a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/za/**b/z能匹配a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录?.js能匹配a.js,b.js,c.jsa??能匹配a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符[xyz].js只能匹配x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符[^xyz].js能匹配a.js,b.js,c.js等,不能匹配x.js,y.js,z.js
当有多种匹配模式时可以使用数组
//使用数组的方式来匹配多种文件 gulp.src([‘js/*.js‘,‘css/*.css‘,‘*.html‘])
2.管道符pipe()
gulp.src(globs) 将文件匹配到，然后通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到dest(path)写入文件，
这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值是一个stream对象)。
3.gulp.dest(path)方法是用来写文件
通过pipe方法导入到将文件写入到指定目录中
只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，
所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名
4.gulp.task()方法用来定义任务
gulp.task(name[, deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
数组中放着其他任务的任务名，当调用name的时候，其他任务也先执行，然后执行name任务
任务名定义为：default 为默认任务名，需要执行时直接在npm 命令好行中 输入 gulp
5.gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为
gulp.watch(glob[, opts], tasks)
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。文件具体的路径和文件
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组 ，数组里是相应的任务名 。
只要监视的文件发生改变，则任务就会执行
如何执行自定义任务：
npm命令行中输入：
gulp 任务名
小练习：
var gulp=require(‘gulp‘); //引入模块
var less=require(‘gulp-less‘); //引入编译less的插件
gulp.task(‘byless‘,function () { //定义任务名 ，任务函数
return gulp.src("./less/*.less") //匹配文件
.pipe(less()) //通过管道符参数，gulp插件进行处理
.pipe(gulp.dest("./css/index.css")) //处理完后写入文件
})
gulp.task(‘abc‘,function(){ //定义任务名，任务函数
gulp.watch("less/less.less",[‘byless‘]) //添加监听
})
查考博客：https://www.cnblogs.com/2050/p/4198792.html
原文地址：https://www.cnblogs.com/wxyblog/p/11380038.html