gulp + 服务器 --暑假Day11

第三方模块Gulp

基于node平台开发的前端构建工具
机器代替手工，提高开发效率
可以进行语法转换，项目上线时的文件压缩合并，公共文件抽离，修改文件浏览器会自动刷新

• gulp.src():获取任务要处理的文件
• gulp.dest():输出文件
• gulp.task():建立gulp任务
  第一个参数是任务的名称，第二个参数是任务的回调函数
• gulp.watch():监控文件的变化

const gulp = require('gulp');

gulp.task('first', () => {
    console.log('第一个gulp任务');
    gulp.src('./src/css/index1.css')
        .pipe(gulp.dest('dist/css'));
})//实现了拷贝效果

其他功能通过插件来实现,使用方法就是下载引用调用

如何将抽取出去的html文件的公共代码再插入到原来的文件里面呢？只需要在body里面书写@@include(‘文件路径’)

package.json

在命令行中输入npm init -y就会自动生成这个文件

node_nodules文件夹内容过碎，所以传输时不建议都传输，因为在package.json里面会有加载过插件的记录，所以可以在接收文件后自己加载所需要的插件

项目依赖：在项目的开发阶段和线上运营阶段，都需要依赖第三方包
开发依赖：在项目开发阶段需要依赖，线上运营阶段不需要依赖第三方包

开发依赖会把–save-dev命令会将包添加到package.json文件的devDependencies中

–production命令会让命令行只缓存项目依赖

package-lock.json文件是为了锁定包的版本，加快下载速度

Node.js中模块加载机制

只有路径，没有后缀

没有路径也没有后缀

Node.js

Node.js全局对象global

浏览器中是window，Node中是global

Node中有这些方法

服务器

域名：就是上网使用的网址

可以通过计算机发出很多请求，如何判断发出的是哪种请求，于是就引入了端口

端口就是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务

url

统一资源定位符，是专为标识网上资源位置而设的编址方式

http:超文本传输协议，提供了一种发布和接收HTML页面的方法

本机域名：localhost
本地IP：127.0.0.1

创建web服务器

const http = require('http');
// createServer用于创建网站服务器
const app = http.createServer();

app.on('request', (req, res) => {
// req代表请求对象，保存了请求相关的信息，res是响应
    res.end('<h2>hello user</h2>')
})
// 监听3000端口号 
app.listen(3000);
console.log('网站服务器启动成功');

HTTP协议

客户端和服务器端共同的规范

报文，就是http请求和响应的过程中传递的数据块，包括要传送的数据和一些附加信息，要遵守规定好的格式有请求报文和响应报文,报文都是键值对

请求报文

GET：请求
POST：发送

form元素有两个属性，method和action，method是指定当前表单提交的方式，action是指定当前表单提交的地址

• req.headers获取请求报文
  如果想获取到更详细的内容，比如说想获取请求报文里面accept里面的内容，只需要像下面这样就可以了，在中括号的引号里面写上想要的键就可

console.log(req.headers['accept']);

• req.url获取请求地址，可以根据客户端不同的请求来响应不同的内容
  如果在网页中什么都不输入，会返回/
• req.method获取请求方法

响应报文

通过http状态码来判断请求的状态

200:请求成功
404:请求的资源没有被找到
500:服务器端错误
500:客户端请求有语法错误

响应内容的类型

    // 第一个参数是状态码，默认200；第二个参数是对象，里面填的内容是响应头里面的东西
    res.writeHead(200, {
        'content-type' : 'test/html;charset = utf8'
        // 'content-type' : 'test/plain'//表示TXT纯文本
    })

• GET请求参数是通过url来传递的
• POST请求参数是通过事件的方式接受的
  data当请求参数传递完成时候发出data事件
  end当参数传递完成的时候发出end事件

const http = require('http');
const app = http.createServer();
const querystring = require('querystring');
//querystring模块的parse方法可以用于将POST传递的内容改变为对象格式
app.on('request', (req, res) => {
   let postParams = '';
   req.on('data', params => {
       postParams += params;
   })
   req.on('end', () => {
       console.log(querystring.parse(postParams));
   })
   res.end('ok');
})
// 监听3000端口号 
app.listen(3000);