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("跳舞");
})
- 复制:
- gulp.src("入口文件路径"); -- 选中某个、某些源文件
- gulp.pipe(); -- 管道 -- 输送/插件操作
- 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"))
})
- 文件的路径写法:
- 想找到src下面的html下面的1.html:src/html/1.html
- 想找到src下面的html下面的所有的html:src/html/*.html
- 想找到src下面的html下面的所有的文件:src/html/*
- 希望将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
- 变量:
- 创建:$变量名: 值;
- 使用时,$不能省略
- 不区分中划线和下划线
- 依然具有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 如何使用:
- 项目经理:
- 安装svn服务器端:VisualSVN-Server-4.3.2-x64.msi
- 为此项目组的每个开发者创建出账号密码
- 创建项目仓库
- 把仓库地址和你的账号私发给你
- 开发人员:
- 安装svn客户端:TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi - 记得重启一下电脑(不重启可能看不到小图标)
- 对着任意位置右键:svn checkout - 检出/拉取仓库,填上仓库地址
- 在文件夹(仓库)里面做开发
- 每天下班前提交到服务器:在项目文件夹里面,写代码的位置,右键svn commit,填入日志,在提交
- 每天上班前更新一下:右键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个级别:
- 防扩展:Object.preventExtensions(obj);
- 密封:Object.seal(obj);
- 冻结: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))