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>

原文地址:https://www.cnblogs.com/ngdty/p/9637186.html

时间: 2024-10-13 22:55:33

gulp 前端自动化工具的使用&&yarn的相关文章

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

学习安装gulp前端自动化工具步骤流程

首先,安装所需要的插件 yo  bower gulp三个工具 npm install -g yo bower gulp 再次,安装gulp所需要的generator-gulp-webapp,这个和grunt的有个区别就多了一个gulp标识 npm install -g generator-gulp-webapp 最后一步安装gulp-webapp,注意要和grunt区分开来 yo gulp-webapp 执行完上面的步骤后,输入 gulp server后,会自动打一个浏览器窗口,如果未打开可以在

前端自动化工具 -- fis 使用简介

FIS也是一个新生的前端自动化工具,好下面就来简单介绍一下,真的好简单介绍啊.. 个人觉得FIS已经囊括了一个“大前端”的范畴. 先来看看别人怎么看FIS和Grunt和Gulp F.I.S在实际项目中的应用体验如何? 前端工具里面gulp和fis,有哪些优缺点? FIS和Grunt的区别 FIS入门很简单,提高难度也不大,因为官方已经提供了非常多的文档 围绕着最基本的三条命令 fis install <name> fis release [options] fis server <com

HTML5技术分享:前端自动化工具推荐

随着前端开发技术的不断发展,前端开发工作也变得越来越复杂,如果能合理地采用一些自动化的工具,生活要容易得多. LiveReload 我目前的开发主力机是一台较早的 13寸 Macbook Pro,外加一台戴尔的显示器.相信做前端开发的都知道,这多出来的一台显示器对工作效率的提升有多大. LiveReload 技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作.目前实现 LiveReload 的方式很多,如果你倾向于图形化的桌面应用,可以尝试一下 LiveReload.app, 地址是:ht

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

gulp前端自动化入门

一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init生成package.json 2.定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp 3.npm install --save-dev  安装gulp 4.新建gulpfile.js  需要安装npm install --save-dev gulp-less  | npm install --save-dev gulp-uglify | npm install --save-dev gulp-au

前端自动化工具 -- gulp 使用简介

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g

gulp前端自动化构建工具入门篇

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率. 为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合