1. 程式人生 > >gulp 前端自動化工具的使用&&yarn

gulp 前端自動化工具的使用&&yarn

row dep 全局 save -c package script https pac

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>

gulp 前端自動化工具的使用&&yarn