gulp的使用以及安装、gulp服务器代理

gulp是什么

gulp是 基于node的自动化构建工具

gulp可以做什么

1.可以自动压缩js文件、css文件、图片
2.为避免兼容问题,可以将ES6语法转换成ES5
3.可以将sass源文件编译生成css
4.可以自动刷新浏览器
5.可以在本地搭建一个代理服务器以便于解决临时的跨域问题

gulp的安装

  • node环境安装

gulp是一个基于NodeJS编写的软件,需要我们先安装NodeJS的运行环境。
点击这里,下载nodejs;

  • 安装gulp
    (网速问题,可以考虑把npm换成cnpm,可以使用淘宝提供的镜像服务器)
    1.gulp插件安装命令
npm install <name>  -g  全局安装
(-g 表示全局安装,这样你在电脑上任何位置都能只用gulp 命令。)

npm install --save-dev:局部安装

2、创建一个gulp项目

接下来进入你项目的根目录,然后输入命令

  • 初始化文件夹
npm init

初始化gulp环境,并且会在项目文档下自动创建一个package.json文件,
这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)(终端会自动出现一些内容,可以一路回车,或者随便填)

npm install gulp --save-dev 

在安装过程中,由于网速问题,经常导致安装失败。 多尝试几次就好
如果安装过程没有出现任何Error提示,那就没有问题了。项目中多出了一个node_modules文件夹,这就是我下载的gulp软件?
是的,不要修改、移动或删除这个文件夹

开始编写gulp任务文件

  • gulp常用命令

    • gulp.task() 定义指令

    • gulp.src() 用来找到指定的文件

      • 文件路径设置:
        a、单个文件夹:“src/js/index.js”;
        b、匹配所有文件:"" 例:src / ** / * .js => src下面所有的js文件
        c、匹配0个或多个子文件夹:"**" 例如:scr/ ** /
        .js => src下面的0个或者多个子文件夹的js文件
        d、匹配多个属性:{} 例如:src/{a,b}.js => src下面的a.js和b.js src/
        .{jpg,png,gif} => src下面所有的jpg png gif文件
        e、排除文件:! 例如: !scr.a.js => 排除src下面的a.js文件
    • gulp.pipe() 用来连缀执行gulp方法

    • gulp.dest() 转存到指定目录

    • gulp.watch() 监听文件,执行指定的命令

这个任务文件的作用?
简单的说,就是写一个任务列表,告诉gulp具体要做什么。

比如说我现在想压缩我的js文档、那么我应该怎么做呢?
假定我们现在的项目结构是这样的
在这里插入图片描述

src目录存放我们的源文件,dist目录存放我们压缩后的文件
我们要在项目的根目录,创建一个gulpfile.js文件(传说中的gulp任务文件)

gulpfile.js里的内容大概是这样的

压缩转存

使用前需要安装 输入命令行 npm install gulp-uglify --save-dev

let gulp = require('gulp');//加载gulp模块
let uglify=require('gulp-uglify');//加载压缩模块,这是个插件,使用前需要安装 输入命令行 npm install gulp-uglify --save-dev

//随便定义一个任务名字,比如说"buildJS"
gulp.task("buildJS",()=>{
	gulp.src("./src/**/*.js")//读取src文档下所有文档下的所有js文档
	.pipe(uglify())//通过pipe(管道传输功能),传输给压缩模块进行压缩
	.pipe(gulp.dest("./dist/js"));//通过pipe传输转存到dist文档下的js文件夹
})

一切准备就绪,我们就可以到回到命令行输入gulp buildJS,接下来的事情就是gulp进行编译压缩转存了。

sass转译成css

使用前需要安装 输入命令行 npm install gulp-sass --save-dev

let gulp = require('gulp');//加载gulp模块
let sass=require('gulp-sass');//

//随便定义一个任务名字,比如说"buildCSS"
gulp.task("buildCSS",()=>{
	gulp.src("./src/style/*.scss")
	.pipe(sass())
	.pipe(gulp.dest("./dist/style"));
})

回到命令行输入gulp buildCSS,gulp就开始进行sass转译了

文件监听

gulp.task("watching",()=>{
	gulp.watch("./src/**/*.scss",["buildCSS"]);
	gulp.watch("./src/**/*.*",["buildJS"]);
})

回到命令行输入gulp watching,gulp就开始进行文件监听了

gulp服务器代理

当你要请求的接口发生跨域的时候,你可以用gulp搭建服务器、反向代理进行请求
使用前需要安装 输入命令行 npm install gulp-webserver --save-dev

let webserver=require('gulp-webserver');
gulp.task('webserver',()=>{
	gulp.src('dist')//以哪个文件夹作为根服务器
	.pipe(webserver({
		livereload:true,//热部署,是否可以自动刷新
//		https:true,//默认是http 需要与请求接口协议一致
		port: 3002,//端口
		host: '127.0.0.1',//域名
		proxies:[
			{
				source:'/api',//随便起,相当于你要请求接口的替换名 ajax请求时就用这个名字
				target:'http://。。.com/' //要请求的接口
			}
		]
	}))
})

回到命令行输入gulp webserver,服务器启动
ajax请求时就可以这么写了

$.ajax({
			
			url:"https://127.0.0.1:3002/api",
			success:function(data){}
			
});

以上,如果我们想在一起执行,那么你可以这么写:
gulp.task(“all”,[“webserver”,“buildJS”,“buildCSS”,“watching”])
all这个名字是随便起的,回到命令行执行 gulp all
接下来,以上功能就都启动了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值