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
接下来，以上功能就都启动了