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

一、全局安裝gulp
          cnpm install gulp -g

 二、若是須要使用gulp的時候
            a、cnpm init    初始化倉庫   後面加 -y

            b、局部安裝   gulp  cnpm install gulp --save-dev

                        --save：將保存配置信息至package.json
     
                         -dev：保存至package.json的devDependencies節點

            c、建立一個gulpfile.js文件   


         三、pageage.json   node_modules   gulpfile三個文件必須在同一目錄


         四、運行任務
             gulp  任務名稱
  

        yarn  異步  每次下載完畢後會緩存包  緩存讀取  
        npm  同步   不會緩存    線上讀取   

        使用
            一、安裝
                cnpm install yarn -g

            二、cnpm install gulp --save === yarn add gulp

            三、cnpm install gulp --save-dev === yarn add gulp --dev

            四、更新 cnpm update 包名 == yarn update 包名

            五、yarn remove 包名 == npm uninstall 包名 刪除包

            六、yarn clear 清除緩存

            七、yarn install  == cnpm install

            八、 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>