gulp在项目中的详细使用流程

前端（接到项目了）

角色

1. 总监
2. 决定项目使用哪种开发工具， 使用哪个框架开发
   开发工具： gulp webpack(主流) 自动构建项目的快速开发工具
   框架：
   jq
   bs
   vue
   angular
   react
3. 构建版本控制工具
   git svn
4. 决定项目托管的地方
   github 码云（gitee）
5. 创建码云的环境
6. 创建分支
   默认直接创建好的 远程主分支（master）
   创建多个远程子分支
   项目组：
   组长：XXX master
   成员： 成员1 branch1
   成员2 branch2
   成员3 branch3
   成员4 branch4
   git冲突：
   指的是两个人同时操作了一个分支
   git 冲突解决；
   先拉取， 再上传
   git pull
   git push
7. 底层开发： 等安排
8. 将项目下载下来之后， 切记不要直接操作原git内容， 我们应该备份， 然后操作备份内容(本地)
9. 本地
10. 主分支（默认）
11. 子分支
12. 项目开发
13. 专业词
    https ： https协议
    ssh : 秘钥（ git协议 ）
    作业： 分组 --》 码云创建git仓库， 分支

gulp 4.0

npmjs中的gulp的插件 3.x gulp语法支持 不支持4.x

1. 前端服务器启动
2. sass编写
3. html产出
4. 静态资源拷贝
5. js压缩
6. gulp4.x 中 series parallel
7. 反向代理 （插件 http-proxy-middleware）

前后端的跨域： 后端Node.js

//典型的跨域问题
//Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:9001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
`
1. jsonp jsonp + Node.js
1.5 Node.js express跨域
router.get('/shopcar',function(req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
res.header("Access-Control-Allow-Headers", req.header('access-control-request-headers'));
res.render('shopcar',{
goods: '商品1'
})
})
2. cors中间件跨域(两种写法)
3. 全局放置 （能跨域 ， 但是接口有问题 ---> 中间件至上而下执行， 匹配成功， 它就停留了）
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

问题： 即使这样全局设置了， 也是不能跨域的
解决： 缺失了 cors中间件
4. 安装cors
cnpm i cors -D
5. 导入
const cors = requrie(‘cors’)
app.use(cors)
6. 直接在cors中书写配置项 ( 推荐 )

app.use(cors({
origin: ["http://localhost:8001","http://localhost:5000","http://localhost:8080","http://localhost:9001"], //允许所有前端域名
methods: "GET,HEAD,PUT,PATCH,POST,DELETE", //被允许的提交方式
allowedHeaders:['Content-Type','Authorization']//被允许的post方式的请求头
}))
8. 反向代理服务跨域
0: 什么叫反向代理？
反向代理指的是在前端的服务器环境中， 短暂的开启一个后端服务器， 由后端服务器进行数据请求， 然后在将结果返回给前端
9. 使用工程化工具自带的 反向代理服务 --- 暂时不能用
gulp
webpack (自带的)
10. 使用第三方提供的反向代理服务 --> http-proxy-middleware
`
// 1. 启动一个静态服务器
gulp.task('server',function(){
gulp.src('./')
.pipe(server({
port: 9001,
host: 'localhost',
livereload: true,
// directoryListing: {
// enable: true,
// path: '/'
// },
open: true,
allowEmpty: true,
middleware: [
// proxy(标记，配置项)
proxy('/yyb',{
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/yyb':''
}
}),
proxy('/login',{
target: 'http://localhost:3000',
changeOrigin: true
})
]
}))
})

11. 总结：
12. 后端解决跨域（设置请求头）
13. express 原生
14. cors中间件
15. 前端解决跨域
16. 反向代理（无论是自带的还是第三方的都得通过工程化工具解决）