gulp
（使用率：2-） - 三阶段：webpack（使用率：8+）对应的
自动化构建工具（打包工具）：项目经理/小组长使用的 - 学习目的：体验流程
作用：
- *1、复制文件
- *2、压缩（css/js/图片...）
- *3、降级ES6为ES5，降级语法 - 因为ES5之前语法其实都没有变化，ES5只是提供了一些新的API，目的：支持兼容老IE
- 4、将scss/less编译为css - 不需要学习，现在的编辑器都自带此功能
- 5、重命名 - 不推荐，html引入href、src的地方名字都要进行修改
*为什么打包： 目的：1、为了提升网站效率(文件更小) 2、安全性（加密）
gulp是基于node.js编写的一个第三方模块（包、独立软件），需要在npm下载：安装的操作一步都不能少
*固定操作安装：
- 1、cmd必须先全局安装gulp（不安的话，cmd提示：gulp不是内部命令） - 必做（运行gulp必要方式），一次性安装永久可用： npm i --global gulp
- 2、cmd在你的项目中局部安装： npm i gulp
- 3、cmd在你的项目初始化gulp - 必做 npm init 注意：名字可以自己写，但是不能有大写&中文，然后一路回车到底
- 4、配置完成，开始编写属于你自己的gulpfile.js文件！！！必须是这个名字
1、如何使用gulp：
1、先引入var gulp=require("gulp");
API：
1、布置任务：
gulp.task("任务名",()=>{
//任务要做什么操作
})
执行任务：
cmd里面输入gulp 任务名; - gulp基于node，但是属于是一个独立的软件
如果想不写任务名，默认执行default任务名的操作
2、*复制
gulp.src("入口文件路径"); -- 选中某个、某些源文件
gulp.pipe(); -- 管道 -- 输送/插件操作
gulp.dest("出口路径"); -- 输送到哪里去？
案例：
gulp.task("copyAll",()=>{
gulp.src("源文件路径")
.pipe(gulp.dest("出口文件路径"))
})
文件的路径写法：
比如：
想找到src下面的html下面的1.html：src/html/1.html
想找到src下面的html下面的所有的html：src/html/*.html
想找到src下面的html下面的所有的文件：src/html/*
希望将src下面的/下面的所有内容都复制一份：src/*/*
2、gulp的插件
1、压缩css步骤： gulp-cssmin插件 npm下载插件：npm i gulp-cssmin 查看readme中的example小案例 使用前记得引入：
gulp.task("copycssmin",()=>{
gulp.src("src/css/*.css")
.pipe(cssmin())
.pipe(gulp.dest("dist"))
})
2、压缩js步骤：1、删除换行和空白字符以及注释（变小文件） 2、会把【回调函数】中的形参全部简化为一个字母，对应的位置都会简化（变小文件的同时加密保护） gulp-uglify插件 npm下载插件：npm i gulp-uglify 使用前记得引入
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
3、ES降级：gulp-babel; 目的：1、语法变回ES5 老IE也能支持我们写的语法
切记用的是babel6
*安装：
1、npm install --save-dev gulp-babel@7 babel-core babel-preset-env
2、npm install --save-dev babel-preset-es2015
3、配置一个文件必须名为.babelrc：写入：{
"presets": ["es2015"]
}
用法：
*使用前记得引入，先降级，在压缩
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
注意：
*1、记得要要把严格模式给删掉
2、先降级后压缩 - 才能压缩完整
4、图片压缩插件： 参考网页：blog.csdn.net/x550392236/… 下载：npm i gulp-tinypng-nokey
动态样式语言：
静态样式语言：css，作为一门语言，并不称职，语言必须具备的基础概念，变量、运算、循环、分支、函数...等等他都没有，所以导致我们在开发和维护大型项目中极其不方便
动态样式语言：sass/scss、less，在css的基础上，添加了新特性，目的：【简化css开发】
常见的动态样式语言：
- 1、sass/scss
- 2、less
- 3、stylus - 和css语法差别较大
2、编译：浏览器只认识css，不认识其他的动态样式语言，动态样式语言-(编译)->自动得到一个css，html网页真正的引入的是css
- 如何编译：
- HBuilder：工具->倒数第一个插件，可以编译less和scss （手动）
- VSCode：安装一个插件：easy sass，编译你写的scss，你只要一保存就会自动生成一个css （自动）
- 网上一大堆这种编译工具
Scss的新特性：
1、*变量：
创建：$变量名: 值;
特殊： 1、使用时，$不能省略 2、不区分中划线和下划线 3、依然具有js的作用域，全局变量和局部变量，如果某个变量在选择器内部创建的，则为局部变量，放在最外面的就是全局变量
2、*****嵌套：选择器可以嵌套：
语法：
.d1{
...
.d2{
...
.d4{
...
}
}
.d3{
...
&:hover{...}
}
}
编译后：
.d1{...}
.d1 .d2{...}
.d1 .d3{...}
.d1 .d3:hover{...}
.d1 .d2 .d4{...}
特殊：
1、层级选择器由你自己决定，你可以在选择器前面加>、空格、+、~，如果你没加，默认为空格
2、&类似于JavaScript中的this，被那个{}所包裹，就是那个选择器
3、*导入：
有了动态语言，可以将多个scss整合编译为一个css，并且js也能获取到css里面的代码： @import "文件路径";
4、注释：只能书写多行注释/****/，css本来就不认识单行注释
5、*****混合器：类似于JavaScript中的函数
1、创建混合器
@mixin 混合器名($形参:默认值,...){
css属性名: css属性值;
...
}
2、调用混合器
@include 混合起名(实参); - 传参顺序很重要
@include 混合起名($形参:实参); - 传参顺序不重要
特殊：
1、使用时，关键字别掉
2、不要慌着封装、碰到重复的代码了，在提取出来封装为一个混合器
6、继承：
7、*运算符：主要是用于颜色值的运算：支持+ - * /，越往0靠近数字越小，就越暗淡，越往f靠近数字就越大，就越明亮 #000000 - #ffffff
8、分支和循环：
less：和scss特性几乎一样
1、变量的创建：@变量名: 值;
2、混合器更简单：
创建：
.混合起名(@形参:默认值,...){
css属性名: css属性值;
...
}
使用：
.混合起名(@形参:实参,...)
SVN工具（1-）：
集中式版本管理控制工具
作用：项目管理
集中式：服务器只有一台电脑，所有人可以把自己完成的工作，传送到服务器上，任何人（客户端）都可以访问
缺点：这台电脑如果坏了，就锤子了
优点：没有放在云端，安全性一定是极高的，如果泄露了一定是内鬼，如果项目真的是需要很安全的，你的电脑应该也会装上监控软件
如何使用：
1、项目经理：
1、安装svn服务器端：VisualSVN-Server-4.3.2-x64.msi
2、为此项目组的每个开发者创建出账号密码
3、创建项目仓库
4、把仓库地址和你的账号私发给你
5、承受压力、核算项目周期、核算项目成本、监督项目进度、陪伴加班...
2、开发人员
1、安装svn客户端：TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi - 记得重启一下电脑（不重启可能看不到小图标）
2、对着任意位置右键：svn checkout - 检出/拉取仓库，填上仓库地址
3、在文件夹（仓库）里面做开发
4、每天下班前提交到服务器：在项目文件夹里面，写代码的位置，右键svn commit，填入日志，在提交
5、每天上班前更新一下：右键svn update
GIT工具（9+）：三阶段学习 - 分布式版本管理控制工具
websocket
- HTML5提供的了一个新特性，代码并不复杂，重点在于理解上
1、HTML5新特性10个：其实是一个概念，并不是只有标签才叫做HTML5
一、语义化标签
二、新增Input表单的类型、和属性
三、audio、video音频和视频
四、Canvas绘图
五、SVG绘图 - 因为程序员大部分都不会画画，就算学会了，画出来也很丑，而现在有框架echart.js，可以帮助你实现画图功能（数据可视化 - 折线图、柱状图、饼状图...）
六、地理定位
七、拖拽API
八、WebStorage - sessionStorage和localStorage
九、WebWorker - 没用
十、WebSocket
2、websocket的概念
http协议 属于请求-响应模型，只有客户端发起请求，服务器端才能响应消息，没有请求就没有响应， 一个请求，只能得到一个响应，有些场景中，此模型就不太行了：比如：实时走势图、在线聊天室等等...
解决：
1、ajax+定时器 - 请求过于复杂了，服务器的压力太大，而且不够频繁（心跳请求、长轮询）
2、websocket协议：简称ws协议：属于广播-收听模型，客户端连接到服务器端就不会再断开了，永久连接的，双方可以随意的向对方发送消息，且是不对等的发送，WS协议专门用于完成实施走势图、在线聊天室等等...
如何使用ws：
1、基于Node.js的第三方模块包，下载引入：
var ws=require("ws");
2、分为三方面：
1、依然使用node.js搭建http服务器和文件系统 - 可以用express简化
2、搭建ws服务器
//搭建ws服务器并且设置了监听端口号
var server=new ws.Server({port:8008});
//绑定了连接事件，是不自己断开的，可向客户端发送消息，或者，接收消息
server.on("connection",socket=>{
console.log("11111---有人来连接上了");
//后端->前端
socket.send("消息")
//前端->后端
socket.on("message",data=>{
data->前端说的话，只不过是一个buffer类型
})
})
3、搭建ws客户端
//连接到ws服务器端
var socket=new WebSocket("ws:127.0.0.1:8008");
//前端想要接收消息
socket.onmessage=e=>{
e.data;
}
//前端说话：
socket.send("消息");
ES
1、ES5：
1.1、保护对象：
1、6大特性
Object.defineProperties(obj,{
"属性名":{
value:,
writable:true/false,
enumerable:true/false,
configurable:true,false
get:()=>{
拦截操作
},
set:()=>{
拦截操作
}
}
})
2、3个级别
1、防扩展：Object.preventExtensions(obj);
2、密封：Object.seal(obj);
3、冻结：Object.freeze(obj);
1.2、数组新增的六个API：
1、判断：arr.every/some((v,i,arr)=>判断条件)
2、遍历：arr.forEach((v,i,arr)=>操作)
var newArr=arr.map((v,i,arr)=>操作)
3、过滤和汇总
var subArr=arr.filter((v,i,arr)=>判断条件)
var sum=arr.reduce((prev,v,i,arr)=>prev+v);
1.3、call、apply-借用
语法：
Array.prototype.slice.call(借用的人,实参1,....)
Array.prototype.slice.apply(借用的人,arr)
bind-买
语法：
var 新的slice=Array.prototype.slice.bind(指定的人,永久实参1)
1.4、严格模式：
"use strict"
2、ES6：
超级大版本：
1、模板字符串：${name}
2、let 变量名=值;
3、箭头函数
4、for(var v of arr){ v - 值 }
5、解构赋值 new Vue({}) - 很多框架底层都用到了解构赋值
6、Set和Map [...new Set(arr)] - 数组去重变回数组
7、class关键字 - 简化面向对象的三大特点：封装、继承、多态
class plane extends flyer{//extends有两个作用：1、继承自有属性全部都不用再写，只需要写一次super()，2、自动继承到共有方法
constructor(name,speed,rl){//放在constructor里面的都是自有属性
super(name,speed);
this.rl=rl;
}
fly(){//flyer提供的fly方法不好用，我自己封装了一个，覆盖他的 - 多态
return `${this.name}正在以时速${this.speed}飞行,可以容纳${this.rl}人`;
}
}
8、Promise - 让异步有顺序的执行，但是还是异步
new Promise(ajax1).then(ajax2).then(ajax3); - 记得一定要放行，而且前一个return Promise才可以连.then操作
9、模块化开发 - 目的：1、分工合作 2、新的引入方式
语法：
1、分支模块要公开自己的成员
export var obj={
...
}
2、主模块要引入：
import {obj} from "./文件路径"
3、HTML在引入主模块的时候要注意设置类型：
<script src="主模块路径" type="module"></script>
3、ES7：
1、ArrayAPI：includes
在ES7之前，如果我们想要判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为-1
在ES7之后，我们可以通过includes来判断数组中是否包含一个指定元素，得到结果直接就是一个布尔值
var arr=[1,2,3,4,5];
//原来
console.log(arr.indexOf(6)!=-1);
//现在
console.log(arr.includes(3))
console.log(arr.includes(6))
2、指数运算符：
在ES7之前，如果我们想要计算数字的乘方，必须通过 Math.pow(底数,幂);
在ES7之后，增加了 ** 运算符 ，可以对数字进行乘方操作
Math.pow(2,3) -> 8
2**3 -> 8
4、ES8：
1、Object.values 作用：可以将一个对象转为数组
之前我们可以通过 Object.keys 获取一个对象所有的key
可以针对对象操作：
var obj={
name:"袍哥",
age:18,
hobby:"学习"
}
console.log(Object.keys(obj));//["name","age","hobby"];
在ES8中提供了 Object.values 获取一个对象所有的value
console.log(Object.values(obj));//["袍哥",18,"学习"]；
2、Object.entries
作用：将对象、数组、字符串 变为 二维数组
通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组
console.log(Object.entries(obj));//[["name","袍哥"],["age",18],["hobby","学习"]]
也可以针对数组、字符串进行操作，数组和字符串会将下标作为key
3、*StringPadding
某些字符串我们需要对其进行前后的填充，来实现某种格式化操作，ES8之中就给字符串添加padStart和padEnd方法，分别填充前面和后面
//日期格式化，为个位数，前面添加了一个0
var h="8";
var m="3";
var s="50";
console.log(`${h.padStart(2,"0")}:${m.padStart(2,"0")}:${s.padStart(2,"0")}`)
4、尾部逗号的添加，不会报错了
5、*****async 和 await
async作为一个关键字放到函数前面，用于表示函数是一个异步函数，异步函数也就意味着该函数不会阻塞后续代码
async function f1(){
return "我是f1函数";
}
f1().then(rs=>{
console.log(rs);
console.log("得到结果要干什么就在这里操作")
});
console.log("后续代码");
意味着任何函数都可以变为异步
await 关键字只能放在async函数里面
async function f1(){
return 1;
}
async function f2(){
return 2;
}
async function f3(){
return await f1() + await f2();
}
f3().then(rs=>{
console.log(rs);
});
console.log("后续代码");
