gulp打包

gulp的安装(版本4)
npm install --global gulp =》 安装完之后只是可以使用命令gulp xxx
检测版本 gulp --version
卸载 npm uninstall --global gulp

准备gulpfile.js 文件
gulp 进行打包的工具
每个项目都需要一个 gulpfile.js
配置打包
运行读取guplfile,按照其配置打包
于src同级

在项目里边再次安装gulp
+项目里的gulp 是以第三方模块的形式出现额**
+专门提供配置配置打包流程的API
+在项目中安装项目依赖 npm i gulp

packpage.json
+dependencies //项目依赖
+devDependcencies //开发依赖 安装第三方依赖时 写$ npm install -dev

gulp API

1.gulp.task();
语法：gulp.task(任务名称，任务处理函数)
作用：创建一个基于流的任务
在任务函数里找到html源文件，进行压缩，打包，放入指定目录

2.gulp.src
语法：gulp.src(路径信息)
作用：找到源文件
书写方式
1.gulp.src(’./a/b.html)
找到指定一个文件
2.gulp.src(’./a/.html)
找到指定目录下，指定后缀文件
3.gulp.srv(’./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 文件发生变化就会执行

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’))

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)
得到一个处理流文件的函数
在管道函数里使用，需要传递参数{browsers:[需要兼容浏览器]}
3.gulp-uglify
npm i -D gulp-uglify
把js文件压缩
导入const uglify = require(‘gulp-uglify’)
得到一个处理流文件的函数
在管道函数里使用
4.gulp-babel
进行es6->es5
@7 使用在gulp@3里
@8 使用gulp@4
下载；需要依赖另外两个包一起下载（@babel/core @babel/preset-env）
导入：只要导入const babel = require(‘gulp-babel’)
得到一个处理流文件的函数
在管道函数里使用,需要传递参数

//运行命令 gulp 任务名称

gulp@3 写法
gulp.task(‘cssHandler’,function(){
// return 后可捕捉到任务的结束
return gulp
.src(’./src/product/css/.css’) //找到源文件
.pipe(cssmin()) //压缩文件
.pipe(gulp.dest(’./dist/product/css/’))
})
gulp@4 写法
const cssHandler = function(){
// return 后可捕捉到任务的结束
return gulp
.src(’./src/product/css/.css’) //找到源文件
.pipe(cssmin()) //压缩文件
.pipe(gulp.dest(’./dist/product/css/’))
}
导出
module.exports.cssHandler = cssHandler

配置默认任务 所有任务一起执行 (gulp.serires()或gulp.parallel())返回值则可直接当作任务函数执行
使用task 的方式创建默认任务
1.gulp.task('default,()=>{})
2.module.exports.default= () =>{}

下载del npm install -D del
导入 const del= require(‘del’)