搭建基本目录结构

电脑 node 版本：14.7.0

|-src
  |-index.js
|-package.json
|-gulpfile.js

安装全局的 gulp-cli 包：npm i gulp-cli -g
本地目录下安装 gul[ 包：npm i gulp -D

gulp cli version: 2.3.0 gulp version: 4.0.2

如何配置 gulpfile.js

项目目录下名为 gulpfile.js 或 Gulpfile.js在运行 gulp 命令行时会被自动加载。

在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API。
除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中。

常用的 gulp API

• gulp.src(filePath/pathArray, [options])
  • 指向指定路径的所有文件，返回文件流对象
  • 用于读取文件
• gulp.dest(dirPath/pathArray, [options])
  • 指向指定的所有文件夹
  • 用于向文件夹中输出文件
• gulp.task([taskName], taskFn)
  • 定义一个任务
  • 如果没传 taskName，就会用 taskFn 的函数名
• gulp.watch(globs, [options], [task])
  • 监视文件变化

开始配置 gulpfile.js

打包 js 文件

常用插件

• gulp-concat：合并文件 js / css
• gulp-uglify：压缩 js 文件
• gulp-rename：文件重命名
• gulp-less：编译 less
• gulp-clean-css：压缩 css
• gulp-livereload：实时自动编译刷新