gulp 前端自动化工具的使用&&yarn
1、全局安装gulp
cnpm install gulp -g
2、如果需要使用gulp的时候
a、cnpm init 初始化仓库 后面加 -y
b、局部安装 gulp cnpm install gulp --save-dev
--save:将保存配置信息至package.json
-dev:保存至package.json的devDependencies节点
c、创建一个gulpfile.js文件
3、pageage.json node_modules gulpfile三个文件必须在同一目录
4、运行任务
gulp 任务名称
yarn 异步 每次下载完毕后会缓存包 缓存读取
npm 同步 不会缓存 线上读取
使用
1、安装
cnpm install yarn -g
2、cnpm install gulp --save === yarn add gulp
3、cnpm install gulp --save-dev === yarn add gulp --dev
4、更新 cnpm update 包名 == yarn update 包名
5、yarn remove 包名 == npm uninstall 包名 删除包
6、yarn clear 清除缓存
7、yarn install == cnpm install
8、 yarn init -y == cnpm init -y
//http-proxy-middleware实现正向代理
在创建的 gulpfile.js 文件中的代码
1安装. cnpm http-proxy-middleware --save-dev
2运行 cnpm server
const connect = require("gulp-connect");
const proxy = require("http-proxy-middleware");
gulp.task("server",function(){
connect.server({
root:"src",
port:8866,
livereload:true,
middleware: function() {
return [
//需要转发的请求
proxy('/api',{
//代理服务器的路径(协议+主机名)
target: 'https://www.maizuo.com',
//是否改变原始主机头为目标url
changeOrigin: true,
}),
proxy('/v2',{
target: 'https://api.growingio.com',
changeOrigin: true,
})
]
}
})
})
html文件中的JS代码
post?后面修改格式
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$.ajax({
type:"get",
url:"/api/film?__t=1536752637528&page=1&count=6&sortType=1&type=1",
dataType:"json",
success:function(data){
console.log(data)
}
});
$.ajax({
type:"post",
url:"/v2/929dfc63e100d573/web/action",
data:{
"stm":"1536754159100"
},
dataType:"json",
success:function(data){
console.log(data)
}
});
</script>