gulp

gulp

自动化构建工具

写代码的时候会遵循一些框架的方式或者某些技术，或我们自己处理的模块化，但是这种代码是不能直接在浏览器运行的，这个过程我们就需要使用自动化构建工具，这些工具都是基于node环境

常用的工具

• grunt 比较古老，现在用的很少
• gulp pc端 jquery的项目打包更多使用gulp
• webpack vue、react都是用的webpack

gulp使用

1. 需要node环境

2. 使用npm全局安装gulp npm i gulp -g，安装完成以后执行gulp -v 只要看到版本号就说明安装成功

3. 创建项目目录

4. 进入目录，执行npm init -y 初始化项目，会创建一个package.json文件，这个文件里就是当前项目的一些说明信息，也可以手动修改

5. 规划目录解构，比如：src放源代码，dist就是根据src源代码使用gulp打包之后可以用来上线的代码

6. 在当前项目局部安装gulp yarn add gulp -D，高版本npm会自动帮我们 --save保存在package.json文件的依赖里，这样的话即使删除node_modules也可以直接运行npm i 就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来

   把所有的路径集中用paths对象来管理

7. 制定压缩html的任务：执行yarn add gulp-htmlmin -D安装压缩html的插件，然后执行压缩任务，再通过module.exports 把这个任务暴露出去，就可以执行gulp html 来运行这个任务了

8. 制定压缩js任务：

   安装压缩js的包yarn add gulp-uglify -D

   安装ES6转ES5的包yarn add gulp-babel @babel/core @babel/preset-env -D

9. css任务：yarn add gulp-clean-css -D

10. 开启服务器： yarn add gulp-connect -D

项目根目录是dist，所以项目中的一切路径都写成/开头的绝对路径，/指的就是dist，避免模块化之后相对位置发生变变化导致路径错误

11. 在开启任务之前先把dist目录删掉： yarn add del -D
12. 导出默认任务流，先同步执行delDist，再异步执行其他任务
13. 监听html、js和css文件的变化，重启对应任务，再重启服务器
14. 编译sass ： yarn add node-sass gulp-sass -D
15. npm i -g yarn 下载yarn