gulp的介绍和手动安装

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(设置允许请求的头部信息)
服务器代理解决跨域:

猜你喜欢

转载自www.cnblogs.com/1179929172-zh/p/11479166.html
今日推荐