gulp构建工具学习笔记

了解gulp

前端自动打包构建工具
打包：把文件压缩，整合，移动，混淆

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

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

什么是流？

文件流：流
	一种文件传输的格式
	一段一段的文件传输
流格式：流
	从头到尾的一个过程
	需要从 源 开始一步一步经过加工
		每一个步骤需要依赖上一步的结果
		最终给出一个完整的成品
gulp是基于流格式的一种打包构建工具

gulp的依赖环境

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

gulp的作用

1.对于css文件
	压缩
	转码（自动添加前缀）
2.对于js文件
	压缩
	转码（ES6转ES5）
3.对于html文件
	压缩
	转码（对格式的转码）
4.对于静态资源文件的处理
5.对于第三方文件的处理

gulp的安装

是一个JavaScript相关的工具
就可以直接使用npm进行安装
需要安装在你的电脑环境里面，一次安装多次使用
打开命令行，输入指令
	npm install --global gulp

gulp的卸载

打开命令行,输入指令
npm uninstall --global gulp

gulp的版本

gulp@3
	安装成功检测版本号，gulp3.0.1
gulp@4
	安装成功检测版本号，gulp cli 2.2.0

gulp的检测

打开命令行，输入指令
gulp --version

gulp全局工具安装完毕

能给你的电脑提供一个启动gulp的环境
私人：可以在cmd里面运行gulp xxx的指令

准备使用gulp

作用：帮我们打包自己的项目

准备一个项目

需求：你要确定好自己的目录结构
你要分开源码和打包以后的内容
必须保证打包前后的目录结构一致
	创建一个叫做src的目录（表示源码）
	创建一个叫做dist的目录（存放打包后的文件）

准备一个gulpfile.js

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

在项目里面再次安装gulp

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

在gulpfile.js里面书写配置文件

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

gulp

1.全局依赖环境gulp
	一台电脑安装一次，以后使用就可以了
	在命令行提供gulp XX 的能力
2.项目依赖第三方gulp
	每个项目都要安装一次
	作为第三方包出现，在你导入以后，可以使用gulp.xxx()方法
	切换到项目目录，输入指令npm install gulp

package.json 记录的第三方依赖

dependencies
	表示的你的项目的 项目依赖
	比如jQuery，swiper
	指项目运行需要用到的内容，将来上线以后也需要用到的内容
devDependencies
	表示的你项目的 开发依赖
	比如gulp
	指项目开发阶段需要用到的内容，将来上线以后不需要用到的
	在你安装第三方依赖的时候，书写npm install -D gulp

sass 转换的问题

1.有一个电脑上的工具叫做sass
	可以转换和编译sass文件为css文件
2.gulp里面配置一个任务，也可以转换sass文件
3.写项目的时候使用哪一个？
	如果你需要使用gulp来配置你的项目，那么不需要使用sass工具
	如果你不需要使用gulp来配置你的项目，那么就需要使用sass工具
4.写项目
	使用sass工具转换sass文件为css
	使用gulp对css，js，html等文件进行打包

sass转码的使用

有一种方式叫做 导入sass文件
如果你需要用到导入
你可以把变量和混合器定义在 .sass 后缀的文件中
	你的gulp配置的只会转码 .scss文件
	你设置的变量和混合器文件不会被转码
但是，当地转码 .scss 文件的时候，会自动读取 .sass文件里面的变量
	会给你解析以后使用

图片问题

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

gulp的常用API

前提： 下载gulp第三方，导入以后使用
1. gulp.task()
	语法：gulp.task(任务名称,任务处理函数)
	作用：创建一个基于流的任务
	例子：gulp.task('htmlHandler',function(){
		//找到html源文件，进行压缩，打包，放入指定目录
	})
2. gulp.src()
	语法：gulp.src(路径信息)
	作用：找到源文件
	书写方式：
		gulp.src('./a/b.html')	找到指定一个文件
		gulp.src('./a/*.html')	找到指定目录下，指定后缀的文件
		gulp.src('./a/**')		找到指令目录下的所有文件
		gulp.src('./a/** /*')	找到a目录下所有子目录里面的所有文件
		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)
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	css压缩
	下载：npm i gulp-cssmin -D
	导入：const cssmin=require('gulp-cssmin')
	导入以后得到一个处理流文件的函数
	直接在管道函数里面执行就好了
2. gulp-autoprefixer	自动添加前缀
	下载：npm i gulp-autoprefixer -D
	导入：const autoPrefixer = require('gulp-autoprefixer')
	导入以后得到一个处理流文件的函数
	直接在管道函数里面使用,需要传递参数.
		{browsers:['last 2 version']}
3. gulp-sass
	下载：npm i gulp-sass -D
	很容易报错，基本下载不成功
	为什么？
		因为gulp-sass依赖另一个第三方包 node-sass
		node-sass很难下载成功
		以前都是在一个地方下载，后来node-sass自己单独有一个下载地址
		如果你不进行单独的node-sass下载地址配置，就很容易失败
	解决：给node-sass单独配置一个下载地址
		下载node-sass从这个单独的地址下载，下载其他的东西还是统一地址
	node-sass单独下载地址
		淘宝镜像
	导入：const sass=require('gulp-sass')
	导入以后得到一个可以处理流文件的函数，直接在管道函数里面执行就可以了
4. gulp-uglify
	把js文件压缩的
	下载：npm i gulp-uglify -D
	导入：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. gulp-htmlmin
	下载：npm i gulp-htmlmin -D
	导入：const htmlmin=require('gulp-htmlmin')
	导入以后得到一个可以处理流文件的函数
	直接在管道函数里面使用，需要传递函数
		collapseWhitespace: true,//表示移除空格和换行
		removeEmptyAttributes: true,//表示移除空的属性（仅限于原生属性）
		collapseBooleanAttributes: true,//表示移除checked类似的布尔值属性
		removeAttributeQuotes: true,//表示移除属性上的双引号
		minifyCSS:true,//表示压缩内嵌式css
		minifyJS:true,//表示压缩内嵌式js代码
		removeStyleLinkTypeAttributes:true,//表示移除style 和link 标签上的type属性
		removeScriptTypeAttributes:true,//表示移除javascript上的type属性
7. gulp-imagemin
	专门用来压缩图片（无损压缩）
	下载需要很好的网络环境
	压缩程度最高是7级，1024k变成1023k
	一般不用进行处理，

8. del
	下载：npm i del -D
	作用：删除文件目录
	导入：const del=require('del')
	导入以后得到一个函数，直接使用传递参数就可以了

9. gulp-webserver
	作用：启动一个基于node书写的服务器
	下载：npm i gulp-webserver -D
	导入：const webserver=require('gulp-webserver')
	导入以后得到一个处理流文件的函数
	我们在管道函数内调用就可以了，需要传递参数

配置一个默认任务

默认任务的作用就是把所有的任务给我一起执行了
要么使用gulp.series(),要么使用gulp.parallel()
这两个方法的返回值是一个函数，不再是一个流，返回值可以直接被当做任务函数使用
使用task的方式创建一个default任务
方式1：
	gulp.task('default'.()=>{})
方式2：
	module.exports.default=()=>{}
默认任务为什么一定要叫做default？
	因为你使用gulp指令的时候，应该是 gulp + 任务名称
	当你有一个叫做default的任务的时候
	你可以直接执行指令 gulp
	他会自动去指定你，gulpfile.js文件中的default任务

为什么会多一个文件？

我们在执行gulp任务的时候
不会进行文件夹的清理
都是按照当前的src目录，和你配置的内容进行打包
放到你指定的目录，如果这个目录已经存在，那么直接放进去
如果这个目录不存在，就创建一个目录再放进去

当我们第二次修改名称以后打包
	本身dist/css里面就有一个index.css的文件
	又打包了一个abcd.css的文件，发现dist/css目录存在，就直接放进去
	所以就会出现两个文件同时存在
		
需要的结果
	只有一个文件
	需要直接删除dist文件夹
	什么时候删除？？每次打包之前删除dist文件夹
	打包完毕会自动创建一个

利用gulp启动一个服务器

gulp是基于node环境的工具
node就是可以做服务器语言
gulp可以启动一个基于node的服务器

启动服务器，用哪个目录当做服务器目录

dist目录,是我的结果目录
如果你使用src目录当做根目录，sass文件怎么办
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中书写
		link href='../sass/login.css'

自动刷新为什么不好使？

因为你启动的服务器是dist目录
你修改的src目录下的内容
你还需要一个任务，当src目录下的内容修改的时候，自动重新打包一遍该文件
导致dist目录下的文件修改，dist目录下的文件修改就会自动刷新界面

启动服务配置自定义域名

webserver位置的host书写一个你自己定义好的域名(www.gx.com)
找到电脑中的 hosts 文件
	c:/windows/system32/dirvers/etc/hosts
	注意：找到那个没有后缀的hosts文件
	添加一行内容 127.0.0.1     www.my.com

配置 gulp-webserver代理

在webserver({
	proxies:[
		{
			source:'代理标识符',
			target:'代理目标地址'
		}
	]
})
注意：
1.如果没有多余代理，不要写空对象(https://www.duitang.com/napi/blog/list/by_filter_id/)
2.如果你想使用代理，那么必须要是在gulp-webserver启动的服务器上运行
3.可以直接代理一半目录结构

为什么可以走代理？

我的代理服务器使用的gulp-webserver
我的页面也是在gulp-webserver上启动的

为什么代理地址不对？

因为代理服务器使用的gulp-webserver
我的页面是在Nginx上打开的

gulp学习笔记代码（在我的资源中，自行下载…）