gulp的介绍和手动安装

Posted 2022-10-07 1179929172-zh

gulp,

前端自动化工具，

文件操作，

项目上线之前，将碎片文件合并，将ES6转成ES5，文件压缩，快速搭建服务器...

gulp基于node环境

gulp就是node的一个非内置的小模块

gulp操作文件的原理：文件流

前端自动化工具：gulp，webpack，grunt，browserify

使用：

非内置，表示，node默认没有，需要手动下载

node的模块，使用node环境下载，node提供了一种下载方式：npm工具

npm工具怎么用？

npm install 工具名 下载

npm uninstall 工具名 卸载

npm init 初始化项目环境，得到配置文件package.json

配置文件：记录了当前项目的相关信息，如：名称，版本，工具等。。。。

（正式的下载步骤↓↓↓）

下载gulp：

1.下载全局：npm install gulp -g

下载一个极速下载器

2.下载局部：npm install gulp --save-dev

2-1.新创建一个文件夹，起名（项目名，如plane，不要出现中文路径，路径不要太深，不要使用gulp关键字）

2-2.打开命令提示符，使用cd进入到刚才新建文件夹plane

2-3.执行下载局部gulp的命令：npm install gulp --save-dev

2-4.测试是否下载成功：gulp -v查看版本号（两个，全局和局部）

2-5.初始化项目：npm init -y

注意：工具是有版本的，不同版本的使用方式可能不同，可以选择

目前gulp的最新版本是：4.xx.xx，不好用，推荐使用3.xx.xx

改版本：

1.打开项目初始化之后生成的文件package.json

2.找到gulp工具的版本号，将4.xx.xx改成3.xx.xx，保存

3.在命令提示符中输入：npm install，回车

2-6.测试gulp安装是否成功：gulp -v，出现两个版本号，全局和局部（3.xx.xx）

2-7.原生gulp的功能有限，如果想使用更多功能，需要安装gulp的插件

插件如：

gulp-connect

http-proxy-middleware

gulp-concat

gulp-uglify

gulp-rename

提示：安装命令格式为：npm install 工具名

2-8.安装之后，查看package.json，会出现对应的插件名和版本号，安装成功

正式使用：（写代码：写在哪？写什么？怎么执行？）

怎么执行：在命令提示符中使用gulp前缀执行

写在哪：写在gulpfile的js文件内

写什么：gulp的代码

1.定义功能:gulpfile.js文件中，通过gulp.task()定义

2.使用：在命令提示符中：gulp 自定义的命令名

3.查看：根据当前指令功能，验证对应信息

gulp插件：

服务器插件：gulp-connect

0.下载

1.引入模块

2.定义指令

3.执行插件的方法

4.配置信息

服务器代理插件：http-proxy-middleware

跨域：

非同源

前端解决跨域的方式：jsonp

后台解决跨域的方式：cors（设置允许请求的头部信息）

服务器代理解决跨域：