Gulp使用

了解gulp

官网https://www.gulpjs.com.cn/

• 前端自动化打包构建工具
  => 打包:把文件压缩，整合，移动，混淆

了解一下前端的打包构建工具

gulp:基于流的打包构建工具
webpack:基于js文件的打包构建工具

什么是流

• 流文件:流
  => 一种文件传输的格式
  => 一段段的文件传输

• 流格式:流
  => 从头到尾的一个过程
  => 需要从源开始一步一 步加工

gulp是基于流格式的一种打包构建工具

gulp 的依赖环境

• 依赖于node环境进行开发
• 底层封装的内容就是node 里面的读写文件

gulp 的作用

• 对于css文件
  => 压缩
  =>
  转码(自动添加前缀)

• 对于js文件
  => 压缩
  => 转码(ES6转ES5)

• 对于html文件
  => 压缩
  => 转码(对格式的转换)

• 对于静态资源文件的处理

• 对于第三方文件的处理

gulp的安装

• 是一个JavaScript 相关的T具

• 就可以直接使用npm进行安装

• 需要安装再你的电脑环境里面，一次安装多次使用

• 打开命令行，输入指令

  WIN: $ npm install --global gu1p
  MAC: $ sudo Inpm install --g1obal gulp
  

  gulp的检测

  gulp的检测

• 打开命令行，输入指令

  $ gulp --version
  CLI version: 2.3.0
  Local version: Unknown
  

gulp的卸载

打开命令行，输入指令

 $ npm uninstall --global gulp

gulp的版本

• gulp@3
  安装成功检测版本号，gulp 3.9.1
• gulp@4
  安装成功检测版本号，gulp cli 2.3.0
  gulp全局工具安装完毕
• 能给你的电脑提供个启动 gulp的环境
• 私人:可以再 cmd 里面运行gulp xxx 的指令

准备使用gulp

作用:帮我们打包自己的项目
1.准备一个项目

• 需求: 你要确定好自己的 目录结构
  你要分开源码和打包以后的内容
• 确定自己的目录结构

• catdmoe1
• src
  源码

• src
  源码

• pages
  htm]
• CSS
  CSS
• js
  js
• sass
  sass
• images
  图片
• videos
  视频
• audios
  音频
• lib
  第三方文件
• fonts
  字体图标文件

2.准备个gulpfile.js 的文件

• 必须有gulp进行打包的依据
• 每一个项目需要一 个gulpfile.js
• 我们再这个文件里面进行本项目的打包配置
• gulp再运行的时候，会自动读取gulpfile.js 文件里面的配置
• 按照你再gulpfile.js 文件里面的配置进行打包工作
• 注意: 直接写在项目根目录， 和src 同级

3.再项目里面再次安装gulp

• 注意:
  项目里面的gulp 是以第三方模块的形式出现的
• 专门给你提供配置打包流程的API的
• 每一个项目都要安装一 次
• 打开命令行，切换到项目目录
  输入指令$ npm install gulp -D

4.再gulpfile.js 里面书写配置文件

• 书写你该项目的打包流程
• 书写完毕以后，按照打包流程去执行gulp指令运行gulpfile.js 文件

1.全局依赖环境gulp

• 一台电脑安装次， 以后使用就可以了
• 再命令行提供gulp xXx的能力
• 指令$ npm install --global gulp

2.项目依赖第三方gulp

• 每一个项目都要安装一次
• 作为第三方包出现，在你导入以后，可以使用gulp.xxx() 方法
• 切换到项目目录，输入指令$ npm install gulp

package. json记录的第三方依赖

• dependencies
  表示的你项目的项目依赖
  比如jquery, swiper
  指项目运行需要用到的内容，将来上线以后也需要用到的内容
• devDependencies
  表示的你项目的开发依赖
  比如guln
  指项目开发阶段需要用到的内容，将来上线以后不需要用到的

gulp的常用API

• 前提:下载gulp第三方，导入以后使用

1. gulp. task()

语法: gulp.task(任务名称，任务处理函数)
作用:创建一个基于流的任务
例子: gulp.task(‘htmlHandler’，function() {
// 找到html 源文件，进行压缩，打包，放入指定目录
})

2. gulp.src()

语法: `gulp.src(路径信息)`
作用:找到源文件
书写方式
2-1. `gulp.src('./a/b.htm1')`
找到指定一个文件
2-2. gulp.src('./a/*.html')
找到指定目录下，指定后缀的文件
2-3. gulp.src('./a/**')
找到指令目录下的所有文件
2-4. gulp.src('./a/**/*') 
找到a目录下所有子目录里面的所有文件
2-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()

管道函数
所有的gulpAPI都是基于流
接收当前流，进入下一个流过程的管道函数
例子:
gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest( 'abc' ))

第一个gulp程序

我们前面已经下载了gulp包`

开始编写程序

在和package.js 同级目录下创建gulpfile.js文件，在创建一个src文件夹

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-sass

下载: npm i gulp-sass -D
很容易报错，基本下载不成功
为什么:因为gulp-sass 依赖另一个第三方，node-sass
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 的时候会使用过程
$set SASS_ BINARY_ SITE=https://npm.taobao.org/mirrors/node-sass/
$ npm i node-sass -D
$ npm i gulp-sass -D

4. gulp-uglify

把JS文件压缩的
下载: npm i -D gulp-uglify
导入: const uglify = require( ‘gulp-uglify’)
导入以后得到一个可以处理流文件的函数
直接再管道函数中使用就可以了
注意:你不能写ES6语法，一旦有了ES6语法就会报错

5. gulp-babel

专门进行ES6转ES5的插件
gulp-babel 的版本
gulp-babel@7: 大部分使用再gulp@3 里面
gulp-babel@8: 大部分使用再gulp@4 里面
下载:
gulp-babel 需要依赖另外两个包，我们要一起下载
另外两个包: @babel/core @babel/preset-env
导入:
只要导入一个包就够了,他会自动导入另外两个包
const babel = require( “gulp-babel” )
导入以后得到一个可以处理流文件的函数
直接再管道函数内部使用，需要传递参数

6. gullp-htmlmin

下载: npm i -D gulp- htmlmin
导入: const htmlmin = require( 'gulp-htmlmin" )
导入以后得到一个可以处理流文件的函数
直接再管道函数里面调用，需要传递参数

图片问题
再开发环境中
图片是不需要我们压缩的
直接使用线上地址
图片是UI处理好给我们的

gulp-imagemin
专门用来压缩图片(无损压缩)
下载需要很好的网络环境
压缩程度最高是7级，l024K 变成l023K

7.del

下载: npm i del -D

del这个插件7版本不支持CommonJS，要么插件降级，要么换成import导入试试，我是改到6这个版本，

作用:删除文件目录
导入: const del = require(‘del’)
导入以后得到一个函数，直接使用传递参数就可以了

sass文件

• src/pages/login.html
• src/sass/ login.scss
  怎么使用
  将来src/pages/login.html 会把打包传递到dist/ pages/ login.html
  将来src/sass/login.scss 会把打包传递到dist/sass/login.css
  +再html中书写

8. gulp-webserver

作用:启动一个基于node书写的服务器

下载:
npm i gulp-webserver -D

导入: const webserver = require( “gulp-webserver” )
导入以后得到一个处理流文件的函数
我们再管道函数内调用就可以了，需要传递参数

gulp打包组件
场景

把重复的位置单独拿出来，写成一个html 片段
单独拿出来的片段可以包含css 和js
也可以不包含
当我压缩html的时候
能再固定位置把我写好的html 片段引入进来

组件

一段可以包含(cs /js)一整套html结构片段

把页面的每一部分分成一段一段的html 片段
最后组装在一起

9. gulp-file-include

作用:再一个html 页面里面导入一个html 片段
下载: npm i -D gulp-file-include

导入: const fileInclude = require( ‘gulp-file-include’)
导入以后得到一个处理流文件的函数
我们再管道函数内调用就可以了，需要传递参数