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文件夹的
