gulp基本介绍以及安装相关依赖包命令详解

gulp是一种自动打包压缩工具 - 上线的所有的项目文件都必须是压缩文件

需要先下载gulp相关依赖包，再设定gulp程序

注意：和gulp相关的依赖包都是开发依赖包

gulp依赖包安装
1. 创建项目文件夹

	在项目文件夹中，新建src文件夹，存储所有源文件，新建dist文件，使用来存储压缩后的文件

2. 项目文件初始化

在项目文件夹目录下cmd打开命令窗口执行 ` npm init -y `

3. 安装全局依赖包

` npm i -g gulp `

4. 安装项目文件夹中的开发依赖包

1）gulp依赖包 npm i -D gulp

2）css 相关依赖包
npm i -D gulp-autoprefixer // 自动给css语法添加前缀
npm i -D gulp-cssmin // 自动压缩css文件

注： gulp-autoprefixer 需要 在 package.json 中 设定配置 - 设定 添加前缀 兼容的浏览器版本
浏览器兼容设定需要根据 实际项目需求设定
在上一个配置项后添加 逗号
“browerslist” : [ “last 2 version” , // 所有浏览器兼容最新的两个版本
“FireFox > 90” // 独立设定火狐浏览器兼容90以上版本]

3） js相关依赖包
npm i -D gulp-babel
npm i -D @babel/preset-env
npm i -D @babel/core // 将其他ES语法 转化为ES5 语法
npm i -D gulp-uglify // 将ES5 语法的js程序 打包压缩

注：如果js程序中有 promise 和 async await , gulp 打包压缩后程序执行出文件需要script标签src导入 加载 polyfill.js

4）html 相关依赖包 npm i -D gulp-htmlmin

5）服务器 依赖包 npm i -D gulp-webserver

6）删除 依赖包 npm i -D del

7）sass相关依赖包

• 下载全局 node-sass npm i -g node-sass
  注： 如果能下载成功最好 不能下载成功 需要切换 node-sass 专门的下载路径
  npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
  一定要先清除缓存 再 执行 node-sass 。如果还不能安装 是 你的电脑 和 nodejs 版本不匹配 可以 直接 复制拷贝 node-sass解压缩到 C:\Users\用户名\AppData\Roaming\npm\node_modules 文件夹中

• 下载 开发依赖包
  注：一定是 有了 全局 node-sass 才能安装 开发依赖包 gulp-sass(一定是5版本以下，不然报错，最好就4版本)
  npm i -D gulp-sass

也可以同时安装（在安装所有的全局依赖包（包括全局 node-sass）之后把这段代码赋值过去安装）
npm i -D gulp gulp-autoprefixer cssmin gulp-babel @babel/preset-env @babel/core gulp-uglify gulp-htmlmin gulp-webserver del gulp-sass

5. 安装成功

最后，没有报错，package.json中有相关依赖包的信息就表明成功了，下载的所有开发依赖包都在node-modules文件夹中，在实际上线后是不需要这个node-modules文件夹的