gulp ：常用api
前提： 下载gulp 第三方 导入以后使用
1.gulp.task()
语法： gulp.task(任务名称,任务处理函数)
作用： 创建一个基于流的任务
例子：gulp.task('htmlHandler',function(){
//找到html源文件，进行压缩，打包 放入指定目录
})
2.gulp.src()
语法 gulp.src(路径信息)
作用 找到源文件
书写方式
-
gulp.src('./a/b.html')
找到指定一个文件
2. gulp.src('./a/*.html')找到指定目录下 指定后缀的文件
3. gulp.src('./a/**')找到指定目录下的所有文件
4. gulp.src('./a/**/*')找到a目录下所有子目录里面的所有文件
5. gulp.src('./a/**/*.html')找到a目录下所有子目录里面的所有.html文件
3.gulp.dest()
语法：gulp.dest(路径信息)
作用 把一个内容放进指定目录内
例子 gulp.dest('./abc')：把接收到的内容放到abc目录
4.gulp.watch()
语法 gulp.watch(路径信息,任务名称)
作用 监控指定路径下的文件，一旦发现变化，重新执行后面的任务
例子 gulp.watch('./src/pages/*.html',htmlHandler)
当指定目录下html 文件发生变化,就会执行htmlHandler这个任务
5.gulp.series()
语法 gulp.series(任务1,任务2,任务3,...)
作用 逐个执行多个任务，结束👉开始
6.gulp.parallel()
语法 gulp.parallel(任务1,任务2,任务3,...)
作用 同时开始多个任务
7.pipe
管道函数
所有的gulp API 都是基于流
接受当前流,进入下一个流过程的管道函数
例子：gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))
4 gulp常用插件
gulp的各种插件就是用来执行各种各样的压缩混淆转码任务
1.gulp-cssmin
下载npm i gulp-cssmin -D 导入 const cssmin =require('gulp-cssmin')
得到一个处理流文件的函数
直接在管道函数里面执行
2.gulp-autoprefixer
下载：npm i gulp-autoprefixer -D
导入 const autoprefixer = require('gulp-autoprefixer')
得到一个处理流文件的函数
直接在管道函数里面使用，需要传递参数
{browers:[要兼容的浏览器]}
3.gulp-sass
下载 npm i gulp-sass -D
很容易报错
需要依赖另一个第三方 node-sass
node-sass很难下载成功
以前都是在一个地方下载，node-sass自己有一个下载地址
如果不对下载地址单独配置 很容易失败
解决：单独配置一个node-sass地址
下载node-sass 单独地址下载，其他东西统一地址
node-sass单独下载地址
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
单独配置下载一个地址 只有下载 node-sass会使用
过程：
1 执行set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
2 npm i node-sass -D
3 npm i gulp-sass -D
导入：
const sass = require('gulp-sass')
导入后得到一个可以处理流文件的函数，直接在管道函数里面执行就可以
4gulp-uglify
把 js文件压缩的
下载 : npm i -D gulp-uglify
导入: const uglify = require('gulp-uglify')
得到一个可以处理流文件的函数，直接在管道函数中使用
注意：不能写ES6语法 一旦有了ES6语法 就会报错
5.gulp-babel
专门ES6转ES5的插件
gulp-babel版本
@7 大部门使用在gulp@3里面
@8 大部分使用在gulp@4里面
下载：
gulp-babel 需要依赖另外两个包 我们需要一起下载
另外两个包：@babel/core @babel/preset-env
导入：
只要导入一个包就行了，他会自动导入另外两个包
const babel =require('gulp-babel')
导入以后得到一个可以处理文件的函数
直接再管道函数内部使用，需要传递参数
6 gulp-htmlmin
下载：
npm i -D gulp-htmlmin
导入：
const htmlmin = require('gulp-htmlmin')
导入以后得到一个可以处理文件的函数
直接再管道函数内部使用，需要传递参数
7 del
下载：
npm i -D del
作用-删除文件目录
导入：
const del = require('del')
导入后得到一个函数 直接使用传递参数就行
8 gulp-webserver
启动一个基于node书写的服务器
下载：
npm i -D gulp-webserver
导入：
const webserver =require('gulp-webserver')
导入以后得到一个 处理流文件的函数
在管道函数内直接调用就可以，需要传递参数
9 gulp-file-include
作用 在一个html页面里面导入一个html片段
下载：
npm i -D gulp-file-include
导入：
const fileInclude = require('gulp-file-include')
导入以后得到一个 处理流文件的函数
在管道函数内直接调用就可以，需要传递参数
5 gulp 打包组件
场景
把重复的位置单独拿出来，写成一个html片段
单独拿出来的片段可以包含css和js
压缩html 的时候
能再固定位置 把写好的html片段引入进来
一段可以包含（css/js）一整套html 结构片段
把页面的每一部分分成一段一段的html片段
最后组装再一起
