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

Posted 2021-01-05 ngdty

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>