gulp
- 自动化构建工具（打包工具）
作用
- 复制文件
- 压缩（css/js/图片...）
- 降级ES6为ES5，降级语法 - 因为ES5之前语法其实都没有变化，ES5只是提供了一些新的API，目的：支持兼容老IE
- 将scss/less编译为css - 不需要学习，现在的编辑器都自带此功能
- 重命名 - 不推荐，html引入href、src的地方名字都要进行修改
为什么打包
- 上线过后，不可能使用源代码
- 太大了
- 别的成员/外界也能看的懂
- 目的：
- 为了提升网站效率(文件更小)
- 安全性（加密）
安装
- gulp是基于node.js编写的一个第三方模块（包、独立软件），需要在npm下载
- cmd必须先全局安装gulp（不安的话，cmd提示：gulp不是内部命令） - 必做（运行gulp必要方式），一次性安装永久可用：
npm i --global gulp - cmd在你的项目中局部安装：
npm i gulp - cmd在你的项目初始化gulp：
npm init- 名字可以自己写，但是不能有大写&中文，然后一路回车到底
- 配置完成，开始编写属于你自己的
gulpfile.js文件！！！必须是这个名字
使用
- 先引入
var gulp=require("gulp"); - API：
布置任务：
```js
gulp.task("任务名",()=>{
//任务要做什么操作
})
```
- 执行任务：
- cmd里面输入gulp 任务名; - gulp基于node，但是属于是一个独立的软件
- 如果想不写任务名，默认执行default任务名的操作
复制
gulp.src("入口文件路径");-- 选中某个、某些源文件gulp.pipe();-- 管道 -- 输送/插件操作gulp.dest("出口路径");-- 输送到哪里去？- 案例：
gulp.task("copyAll",()=>{
gulp.src("源文件路径")
.pipe(gulp.dest("出口文件路径"))
})
文件的路径写法：
- 想找到src下面的html下面的1.html：
src/html/1.html - 想找到src下面的html下面的所有的html：
src/html/*.html - 想找到src下面的html下面的所有的文件：src/html/*
- 希望将src下面的/下面的所有内容都复制一份：src//
gulp的插件
压缩css步骤
- npm下载插件：
npm i gulp-cssmin - 使用前记得引入
gulp.task("copycssmin",()=>{
gulp.src("src/css/*.css")
.pipe(cssmin())
.pipe(gulp.dest("dist"))
})
压缩js步骤
- 删除换行和空白字符以及注释（变小文件）
- 会把【回调函数】中的形参全部简化为一个字母，对应的位置都会简化（变小文件的同时加密保护）
- npm下载插件：
npm i gulp-uglify - 使用前记得引入
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
