node02
node02：
第三方模块Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务，想要执行机械化操作时执行一个命令任务就能自动执行了
Gulp能做什么？
项目上线，HTML、CSS、JS文件合并压缩
语法转换（es6、less）
公共文件抽离
修改文件浏览器自动刷新
Gulp使用：
1.使用npm install gulp下载gulp库文件
1）新建gulp -demo文件夹
cd gulp-demo
npm install gulp
2.在项目根目录下建立gulpfile.js文件
在gulp -demo文件夹中新建文件gulpfile.js
3.重建项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
在gulp -demo文件夹下新建两个文件夹src和dist文件夹
4.在gulpfile.js文件中编写任务
Gulp中提供的方法：
gulp.src（）获取任务要处理的文件
gulp.dest（）输出文件
gulp.task()建立gulp任务
gulp.watch()监控文件的变化
const gulp=require(‘gulp’);
//使用gulp.task()建立gulp任务
gulp.task(‘first’,()=>{
//获取要处理的文件
gulp.src(’./src/css/base.css’)
//将处理后的文件输出到dist目录
.pipe（gulp.dest(’./dist/css’)）；
})；
5.命令行工具中执行gulp任务
npm install gulp-cli -g安装完成之后多了一个命令gulp
gulp +要执行任务的名字
1.管理员身份打开powerShell
2.输入set-ExecutionPolicy RemoteSigned
Gulp插件：
gulp-htmlmin：html文件压缩
npm install gulp-htmlmin
const htmlmin=require(‘gulp-htmlmin’);
gulp.src(’./src/*.html’)
//将处理后的文件输出到dist目录
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest(‘dist’));
});
gulp-csso：压缩css
gulp-babel：JavaScript语义转化
gulp-uglify：压缩混淆JavaScript
gulp-file-include：公共文件包含
browsersync浏览器实时同步
htmlmin({collapseWhitespace:true})
抽取公共文件代码：
npm install gulp-file-include
@@include(’./common/header.html’)
gulp.task(‘cssmin’,()=>{
gulp.src([’.src/css/.less’,’.src/css/.css’])
.pipe(less())
.pipe(csso())
.pipe(gulp.dest(‘dist/css’))
})
gulp.task(‘jsmin’,()=>{
gulp.src(’./src/js/*.js’,)
.pipe(babel({
presets: [’@babel/env’]
}))
.pipe(gulp.dest(‘dist/js’))
})
npm install gulp-babel @babel/core @babel/preset-env
新建es6语法的js文件
const x=100;
let y=200;
const fn=()=>{
console.log(1234);
}
任务名为default可以只写gulp
node_modules文件夹的问题
1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人时，传输速度会很慢很慢
2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
package.json文件的作用：
项目表述文件，记录了当前的项目信息，例如项目名称、版本、作者、github地址，当前项目依赖了哪些第三方模块等。使用npm init -y命令生成。
可同时下载多个模块，用空格隔开即可：
npm install formidable mime
npm install自动下载需要的第三方模块
项目依赖：
在项目开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
使用npm install包名命令下载的文件会默认被添加到package.json文件的dependencies字段中
开发依赖：
npm install gulp --save -dev
在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
使用npm install包名–save -dev命令将包添加到package.json文件的devDependencies字段中
npm install -production（只下载项目运行依赖）
package-lock.json的作用：
1）锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
2）加快下载速度。因为该文件中已经记录了项目所依赖的第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作。
scripts存储命令的别名
build 命令的别名 命令的完整地址
别名的用法：
npm run build执行命令
Node.js中模块的加载机制：
模块查找规则–当模块拥有路径但没有后缀时：
require（’./find.js’）;
require（’./find’）;
1.require方法根据模块路径查找模块，如果是完整路径，直接引入模块
2.如果模块后缀省略，先找同名js文件，再找同名js文件夹
3.如果找到了同名文件夹。找文件夹中的index.js
4.如果当前文件夹没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件
5.如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
node requir.js
模块查找规则–当模块没有路径且没有后缀时：
require（‘find’）;
1.Node.js会假设它是系统模块
2.Node.js会去node_modules文件夹中
3.首先看是否有该名字的js文件
4.再看是否有该名字的文件夹
5.如果是文件夹看里面是否有index.js
6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7.否则找不到报错
服务器端基本概念：
URL：统一资源定位符
传输协议：//服务器IP或域名：端口/资源所在位置标识
http：超文本传输协议，提供了一种发布和接收HTML页面的方法
开发过程中客户端和服务端说明：
开发阶段，服务器和客户端使用同一台电脑，即开发人员电脑
创建web服务器：
//引用系统模块
const http=require（’http‘）；
//创建web服务器
const app=http.createrServer（）；
//当客户端发送请求的时候
app.on(‘request’,(req,res)=>{
//响应
//请求方式输出
console.log(req.method)；
res.end(‘
hi,user
’);});
//监听3000端口
app.listen(3000);
console.log(‘服务器已启动，监听3000端口，请访问local host：3000’)；
HTTP协议：
客户端和服务器端进行请求和响应的标准
请求方式：
GET请求数据
POST发送数据
2.请求地址
app.on(‘request’,(req,res)=>{
req.headers//获取请求报文
req.url//获取请求地址
req.method//获取请求方法
})；
响应报文：
HTTP状态码：
200请求成功
404请求的资源没有被找到
500服务器端错误
400客户端请求有语法错误
内容类型：
text/html
text/css
application/javascript
image/jpeg
application/json
res.writeHead（400，{
‘content-type’:‘text/plain’
}）;
res.writeHead（400，{
‘content-type’:‘text/html;charset=utf8’
}）;
请求参数：
客户端向服务器端发送请求时，有时候需要携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登陆操作
GET请求参数
提供url模块用于处理url地址保存
url.parse(req.url);//要解析的url地址
var params=url.parse(req.url，true).query;//把查询参数解析成对象形式
parasm.name
parasm.age
let params=url.parse(req.url，true).query;
console.log(params.name);
console.log(params.age);
let {query,pathname}=url.parse(req.url，true);
if(pathname==’/index’||pathname==’/’){
res.end(‘
欢迎来到首页
’);}else if(pathname==’/list’){
res.end(‘welcome to listpage’);
}else {
res.end(‘not found’);
}
POST请求参数
参数被放置在请求体中进行传输
获取POST参数需要使用data事件和end事件
使用querystring系统模块将参数转换为对象格式
//导入系统模块querrystring用于将HTTP参数转换为对象格式
const querystring=require(‘querystring’);
app.on(‘request’,(req,res)=>{
let postData=’’;
//监听函数传输事件
req.on(‘data’,(chunk)=>postData+=chunk;);
//监听参数传输完毕事件
req.on(‘end’,()=>{
console.log(querystring.parse(postData));
})
})
method:指定当前表单提交的方式
action:指定当前表单提交的地址
同步api异步api
//路径拼接
const public=path.join(_dirname,‘public’);
//请求地址解析
const urlobj=url.parse(req.url);
//读取文件
fs.readFile(’./demo.txt’,‘utf8’,(err,result)=>{
console.log(result);
})
同步api：只有当前api执行完成后，才能继续执行下一个api
异步api：当前api的执行不会阻塞后续代码的执行
同步api异步api区别：
同步api可以从返回值中拿到api执行的结果，但是异步api是不可以的
回调函数：自己定义函数让别人调用
代码执行顺序不一样：
同步api从上到下依次执行
回调地狱
Promise
let promise=new Promise((resolve,reject)=>{
})