gulp、动态样式语言

一、gulp

自动化构建工具（打包工具），gulp是基于node.js编写的一个第三方模块（包、独立软件）。

1.1 作用：

• 复制文件
• 压缩（css/js/图片...）
• 降级ES6为ES5，降级语法
• 将scss/less编译为css
• 重命名

1.2 为什么打包

• 为了提升网站效率(文件更小)
• 安全性（加密）

1.3 下载安装

• cmd必须先全局安装gulp（不安的话，cmd提示：gulp不是内部命令） - 必做（运行gulp必要方式），一次性安装永久可用：npm i --global gulp
• cmd再你的项目中局部安装：npm i gulp
• cmd在你的项目初始化gulp：npm init
• 名字可以自己写，但是不能有大写&中文
• 配置完成，开始编写属于你自己的gulpfile.js文件！！！必须是这个名字

1.4 如何使用gulp

• 先引入var gulp=require("gulp");
• 布置任务：

gulp.task("任务名",()=>{
    //任务要做什么操作
})

• 执行任务：
  cmd里面输入gulp 任务名; - gulp基于node，但是属于是一个独立的软件
  如果想不写任务名，默认执行default任务名的操作

var gulp = require("gulp");
gulp.task("dance",()=>{
    console.log("跳舞");
})

• 复制:
  1. gulp.src("入口文件路径"); -- 选中某个、某些源文件
  2. gulp.pipe(); -- 管道 -- 输送/插件操作
  3. gulp.dest("出口路径"); -- 输送到哪里去

// 复制
gulp.task("copyIndex",()=>{
    gulp.src("src/index.html")
        .pipe(gulp.dest("dist"))
}) 
// 复制
gulp.task("copy",()=>{
    gulp.src("src/*")
        .pipe(gulp.dest("dist"))
    gulp.src("src/*/*")
        .pipe(gulp.dest("dist"))
})

• 文件的路径写法：
  1. 想找到src下面的html下面的1.html：src/html/1.html
  2. 想找到src下面的html下面的所有的html：src/html/*.html
  3. 想找到src下面的html下面的所有的文件：src/html/*
  4. 希望将src下面的/下面的所有内容都复制一份：src//

1.5 gulp的插件

• 压缩css步骤：gulp-cssmin插件
  • npm下载插件：npm i gulp-cssmin

var cssmin = require("gulp-cssmin");//压缩css
var rename = require("gulp-rename");//重命名
// css压缩
 gulp.task("perfect",()=>{
     gulp.src("src/*/*.css")
         .pipe(cssmin())
         .pipe(rename({suffix:'.min'}))//重命名
         .pipe(gulp.dest("dist"))
 })

• 压缩js步骤：gulp-uglify插件
  • npm下载插件：npm i gulp-uglify

var uglify = require("gulp-uglify");//压缩js
// 压缩js
 gulp.task("perfect",()=>{
     gulp.src("src/*/*.js")
         .pipe(uglify())
         .pipe(gulp.dest("dist"))
})

• ES降级：gulp-babel
  • 目的：语法变回ES5 老IE也能支持我们写的语法
  • 安装：
    • npm install --save-dev gulp-babel@7 babel-core babel-preset-env
    • npm install --save-dev babel-preset-es2015
    • 配置一个文件必须名为.babelrc：写入：

      {
          "presets": ["es2015"]
      }
      

var babel = require("gulp-babel");//降级
// 降级 压缩js  必须先降级再压缩  记得要要把严格模式给删掉
 gulp.task("perfect",()=>{
     gulp.src("src/*/*.js")
         .pipe(babel())
         .pipe(uglify())
         .pipe(gulp.dest("dist"))
})

• 图片压缩插件：
  • 参考网页：blog.csdn.net/x550392236/…
  • 下载：npm i gulp-tinypng-nokey

var tinypng = require("gulp-tinypng-compress");//压缩图片 每月只能500张
// 图片压缩
gulp.task('perfect', function() {
    gulp.src('src/*/*.{png,jpg,jpeg,gif,ico}')
        .pipe(tinypng({
            key: 'jMcJCqBpbf7gHYwKM8BXYX9svKRdcKdg',
            sigFile: 'dist/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest('dist'));
})

二、动态样式语言

sass/scss、less，在css的基础上，添加了新特性，目的：【简化css开发】

2.1 静态样式语言：css

2.2 常见的动态样式语言：

• sass/scss
• less
• stylus - 和css语法差别较大

2.3 编译：

• 浏览器只认识css，不认识其他的动态样式语言，动态样式语言-(编译)->自动得到一个css，html网页真正的引入的是css
• HBuilder：工具->倒数第一个插件，可以编译less和scss （手动）
• VSCode：安装一个插件：easy sass，编译你写的scss，你只要一保存就会自动生成一个css （自动）

2.4 Scss

• 变量：
  1. 创建：$变量名: 值;
  2. 使用时，$不能省略
  3. 不区分中划线和下划线
  4. 依然具有js的作用域，全局变量和局部变量，如果某个变量在选择器内部创建的，则为局部变量，放在最外面的就是全局变量

$w:100px;//变量
 div {
    $b_g: red;
    width: $w;
    background-color: $b-g;//不区分_和-
 }

• 嵌套：

$w: 200px;
.d1 {
    width: $w;
    .d2 {
        background-color: red;
        >.d4 {
            height: 50px;
            &:hover {//&类似于JavaScript中的this，被那个{}所包裹，就是那个选择器
                height: 30px;
            }
        }
    }
    .d3 {
        color: pink;
    }
}
//编译后
.d1 {
  width: 200px;
}

.d1 .d2 {
  background-color: red;
}

.d1 .d2 > .d4 {
  height: 50px;
}

.d1 .d2 > .d4:hover {
  height: 30px;
}

.d1 .d3 {
  color: pink;
}

• 导入： @import "文件路径";

/*
只认识多行注释
*/
@import "01变量.scss";
@import "02嵌套.scss";

• 混合器：类似于JavaScript中的函数

@mixin whb($w:10px,$h:20px,$b:pink){
    width: $w;
    height: $h;
    background-color: $b;
}
div {
    @include whb(500px,400px);
}
section {
    @include whb(200px,100px,green);
}
//编译后
div {
  width: 500px;
  height: 400px;
  background-color: pink;
}

section {
  width: 200px;
  height: 100px;
  background-color: green;
}

• 继承：

.con {
    width: 100px;
    height: 200px;
}
ul {
    @extend .con;
    background-color: pink;
}
//编译后
.con, ul {
  width: 100px;
  height: 200px;
}

ul {
  background-color: pink;
}

• 运算符：主要是用于颜色值的运算：支持+ - * /，越往0靠近数字越小，就越暗淡，越往f靠近数字就越大，就越明亮

$bg:red*1.1;//调亮10%
div {
    background-color: $bg;
}

• 分支和循环：

@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}
//编译后
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

2.5 Less

• 变量的创建：@变量名: 值;

@b-g:red;
div {
    background-color: @b-g;//区分-和_
}

• 混合器:

.whb(@w:0px,@h:0px,@b:transparent){
    width: @w;
    height: @h;
    background: @b;
}

div{
    .whb()
}

span{
    .whb(100px,100px,red);
}

p{
    .whb(@b:red);
}

SVN、websocket

一、SVN工具

集中式版本管理控制工具

• 作用：项目管理
• 集中式：服务器只有一台电脑，所有人可以把自己完成的工作，传送到服务器上，任何人（客户端）都可以访问

1.1 如何使用：

• 项目经理：
  1. 安装svn服务器端：VisualSVN-Server-4.3.2-x64.msi
  2. 为此项目组的每个开发者创建出账号密码
  3. 创建项目仓库
  4. 把仓库地址和你的账号私发给你
• 开发人员：
  1. 安装svn客户端：TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi - 记得重启一下电脑（不重启可能看不到小图标）
  2. 对着任意位置右键：svn checkout - 检出/拉取仓库，填上仓库地址
  3. 在文件夹（仓库）里面做开发
  4. 每天下班前提交到服务器：在项目文件夹里面，写代码的位置，右键svn commit，填入日志，在提交
  5. 每天上班前更新一下：右键svn update

二、websocket

2.1 HTML5新特性10个

• 语义化标签
• 新增Input表单的类型、和属性
• audio、video音频和视频
• Canvas绘图
• SVG绘图
• 地理定位
• 拖拽API
• WebStorage - sessionStorage和localStorage
• WebWorker
• WebSocket

2.2 websocket的概念

• http协议 属于请求-响应模型，只有客户端发起请求，服务器端才能响应消息，没有请求就没有响应，
• 心跳请求、长轮询：ajax+定时器
• websocket协议：简称ws协议：属于广播-收听模型，客户端连接到服务器端就不会再断开了，永久连接的，双方可以随意的向对方发送消息，且是不对等的发送，WS协议专门用于完成实施走势图、在线聊天室等等...

2.3 如何使用ws

• 基于Node.js的第三方模块包，下载引入：var ws=require("ws");
• 依然使用node.js搭建http服务器和文件系统 - 可以用express简化
• 搭建ws服务器：

//搭建ws服务器并且设置了监听端口号
var server=new ws.Server({port:8008});	
//绑定了连接事件，是不自己断开的，可向客户端发送消息，或者，接收消息
server.on("connection",socket=>{
        console.log("11111---有人来连接上了");
        //后端->前端
        socket.send("消息")
        //前端->后端
        socket.on("message",data=>{
                data->前端说的话，只不过是一个buffer类型
        })
})

• 搭建ws客户端：

//连接到ws服务器端
var socket=new WebSocket("ws:127.0.0.1:8008");
//前端想要接收消息
socket.onmessage=e=>{
        e.data;
}
//前端说话：
socket.send("消息");

ES5-13

一、ES5

1.1 保护对象

• 6大特性：

Object.defineProperties(obj,{
        "属性名":{
                value:,
                writable:true/false,
                enumerable:true/false,
                configurable:true,false
                get:()=>{
                        拦截操作
                },
                set:()=>{
                        拦截操作
                }
        }
})

• 3个级别：
  1. 防扩展：Object.preventExtensions(obj);
  2. 密封：Object.seal(obj);
  3. 冻结：Object.freeze(obj);

1.2 数组新增的六个API：

• 判断：arr.every/some((v,i,arr)=>判断条件)
• 遍历：

arr.forEach((v,i,arr)=>操作)
var newArr=arr.map((v,i,arr)=>操作)

• 过滤和汇总:

var subArr=arr.filter((v,i,arr)=>判断条件)
var sum=arr.reduce((prev,v,i,arr)=>prev+v);

1.3 call、apply-借用、bind-买

• Array.prototype.slice.call(借用的人,实参1,....)
• Array.prototype.slice.apply(借用的人,arr)
• var 新的slice=Array.prototype.slice.bind(指定的人,永久实参1)

1.4 严格模式："use strict"

二、ES6

2.1 模板字符串：${name}

2.2 let 变量名=值;

2.3 箭头函数

2.4 for of

for(var v of arr){
    v - 值
}

2.5 解构赋值

• new Vue({}) - 很多框架底层都用到了解构赋值

2.6 Set和Map

• [...new Set(arr)] - 数组去重变回数组

2.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}人`;
        }
}

2.8 Promise - 让异步有顺序的执行，但是还是异步

• new Promise(ajax1).then(ajax2).then(ajax3); - 记得一定要放行，而且前一个return Promise才可以连.then操作

2.9 模块化开发

• 目的：1、分工合作 2、新的引入方式

1、分支模块要公开自己的成员
    export var obj={
            ...
    }

2、主模块要引入：
    import {obj} from "./文件路径"

3、HTML在引入主模块的时候要注意设置类型：
    <script src="主模块路径" type="module"></script>

三、ES7

3.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))

3.2 指数运算符

• 在ES7之前，如果我们想要计算数字的乘方，必须通过 Math.pow(底数,幂);
• 在ES7之后，增加了 ** 运算符 ，可以对数字进行乘方操作

Math.pow(2,3) -> 8
2**3	      -> 8

四、ES8

4.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,"学习"]；

4.2 Object.entries

• 作用：将对象、数组、字符串 变为 二维数组
• 通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组

console.log(Object.entries(obj));//[["name","袍哥"],["age",18],["hobby","学习"]]

• 也可以针对数组、字符串进行操作，数组和字符串会将下标作为key

4.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.4 尾部逗号的添加，不会报错了

4.5 async 和 await

• async作为一个关键字放到函数前面，用于表示函数是一个异步函数，异步函数也就意味着该函数不会阻塞后续代码，意味着任何函数都可以变为异步

async function f1(){
        return "我是f1函数";
}
f1().then(rs=>{
        console.log(rs);
        console.log("得到结果要干什么就在这里操作")
});
console.log("后续代码");

• await是等待的意思，那么他等待的是什么呢，他后面又该跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回Promise对象的表达式
• 注意：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("后续代码");

五、ES9

5.1 扩展运算符：...

• ES6引入了扩展运算符，但是仅仅只有数组可以使用，ES9过后不光数组，对象也可以使用了，而且它还不光可以脱衣服，还可以穿衣服

//脱掉数组的衣服
var arr=[32,1,54,76,98,7,23,54,24,764];
console.log(Math.max.apply(Math,arr));
console.log(Math.max(...arr));

//脱掉对象的衣服
var obj1={a:1,b:2,c:3}
var obj2={...obj1,d:4}
console.log(obj2);

//穿上了对象的衣服
function f1({a,...c}){
        console.log(a);
        console.log(c);
}
f1({a:1,b:2,c:3})

六、ES10

6.1 flat方法

它会按照一个可指定的深度遍历递归你的数组，并将所有的元素与遍历到的子数组中的元素合并为一个新数组

var arr=[1,[2,[3,[4,[5,6,7,8,9]]]]]
console.log(arr.flat(4));//[1,2,3,4,5,6,7,8,9]

6.2 flatMap

两个方法二合一flat和map，先执行map在执行flat，但是flat只能脱1层

var arr=["hello world","你好 中国","hello h52301"];
var newArr=arr.flatMap(v=>v.split(" "));
console.log(newArr);//["hello","world","你好","中国","hello","h52301"];

6.3 trimStart/trimEnd

七、ES11

7.1 全局对象全新写法：

• 在浏览器中可以通过window访问全局对象
• 在Node.js中可以通过global来访问对象
• 在ES11中对全局对象添加了一个新的名字，统一了规范：globalThis

7.2 for...in循环标准化

• 在ES11之前，虽然很多浏览器支持for...in来遍历对象，但是并没有被ECMA标准化

八、ES12

8.1 逻辑赋值运算符

function f1(a){
        a||="默认值";
        console.log(a);
}
f1();//a=默认值
var obj={
        name:"袍哥"
}	
obj&&=obj.name;
console.log(obj);//袍哥

九、ES13

9.1 字符串、数组API：at();

可以通过at方法获取字符串、数组的元素

var arr=[1,2,3,4,5,6];
console.log(arr.at(0));
console.log(arr.at(2));
console.log(arr.at(-1));
console.log(arr[arr.length-1])
var str="hello world";
console.log(str[str.length-3])
console.log(str.at(-3))