Gulp 是一个流行的自动化构建工具，主要用于前端开发中的任务自动化，如文件压缩、代码合并、代码校验等。以下是一个 Gulp 的入门教程，帮助你快速上手：
1. 安装 Node.js 和 npm
首先，你需要在你的计算机上安装 Node.js 和 npm（Node Package Manager）。你可以从 Node.js 官网下载并安装适合你操作系统的版本。
2. 安装 Gulp
在命令行中，使用 npm 全局安装 Gulp：
npm install --global gulp-cli
注意这里安装的是 gulp-cli（Gulp 命令行接口），而不是 gulp 本身。这是因为 Gulp 4+ 版本将任务逻辑和命令行接口进行了分离。
3. 初始化项目
在你的项目文件夹中，初始化一个新的 npm 项目（如果还没有的话）：
npm init -y
-y 参数会跳过问答过程，自动生成一个默认的 package.json 文件。
4. 安装 Gulp 作为开发依赖
在项目文件夹中，使用 npm 安装 Gulp 作为项目的开发依赖：
npm install --save-dev gulp
5. 创建一个 Gulp 任务
在项目的根目录下创建一个名为 gulpfile.js 的文件，这是 Gulp 的配置文件。在这个文件中，你可以定义你的任务。
下面是一个简单的示例，演示如何创建一个简单的 Gulp 任务来复制文件：
// 引入 gulp
const gulp = require('gulp');// 定义一个名为 'copy' 的任务
function copyTask() {// 使用 gulp.src 指定源文件return gulp.src('src/*.js') // 匹配 src 目录下所有的 .js 文件// 使用 gulp.dest 指定目标目录.pipe(gulp.dest('dist')); // 将文件复制到 dist 目录
}// 使用 gulp.task 导出任务
exports.copy = copyTask;
6. 运行 Gulp 任务
在命令行中，进入你的项目文件夹，然后运行 Gulp 任务：
npx gulp copy
这里使用了 npx 命令来运行项目本地的 Gulp。copy 是你在 gulpfile.js 文件中定义的任务名称。
7. 使用插件
Gulp 的强大之处在于它支持大量的插件，可以用来执行各种任务。例如，你可以使用 gulp-uglify 来压缩 JavaScript 文件，或者使用 gulp-sass 来编译 Sass 文件。
首先，你需要使用 npm 安装你需要的插件：
npm install --save-dev gulp-uglify
然后，在你的 gulpfile.js 文件中引入并使用这个插件：
const gulp = require('gulp');
const uglify = require('gulp-uglify');function minifyTask() {return gulp.src('src/*.js').pipe(uglify()) // 使用 uglify 插件压缩文件.pipe(gulp.dest('dist'));
}exports.minify = minifyTask;
现在你可以运行 npx gulp minify 来压缩你的 JavaScript 文件了。
8. 串联任务
你还可以使用 gulp.series 或 gulp.parallel 来串联或并行运行多个任务。例如：
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');function minifyTask() {// ... 省略 ...
}function compileSassTask() {return gulp.src('src/sass/*.scss').pipe(sass()) // 使用 sass 插件编译 Sass 文件.pipe(gulp.dest('dist/css'));
}exports.build = gulp.series(minifyTask, compileSassTask); // 串行运行两个任务
现在你可以运行 npx gulp build 来同时执行压缩 JavaScript 和编译 Sass 两个任务了。