什么是 Gulp？

在开始安装之前，简单理解一下 Gulp 是什么。

Gulp 是一个流行的前端自动化构建工具，你可以把它想象成一个“超级助手”，通过编写简单的任务（Tasks）,让它自动帮你完成以下繁琐的工作：

• 代码压缩：压缩 HTML、CSS、JavaScript 文件，减小文件体积,加快网站加载速度。
• 文件合并：将多个 CSS 或 JS 文件合并成一个，减少 HTTP 请求数量。
• 代码转译：将现代的 ES6+ JavaScript 代码转译成所有浏览器都能识别的 ES5 代码。
• 自动刷新：当代码修改保存后，自动刷新浏览器,让你实时看到效果。
• 图片优化：压缩图片,在不影响质量的前提下减小文件大小。

Gulp 的核心思想是 "流（Stream）"，它通过一系列“插件”来处理文件，像工厂流水线一样，文件从一端进入，经过处理,从另一端输出。

安装步骤（详细版）

安装 Gulp 主要分为两步：1. 安装环境；2. 创建项目并安装 Gulp。

第 1 步：安装 Node.js 和 npm

Gulp 是基于 Node.js 的，所以首先必须确保你的电脑上安装了 Node.js。

1. 下载 Node.js

   • 访问 Node.js 官网
   • 你会看到两个版本：
     • LTS (Long Term Support)：长期支持版，推荐大多数用户使用,稳定且安全。
     • Current：最新版，包含最新功能,但可能不够稳定。
   • 请下载并安装 LTS 版本，它会自动包含 npm（Node Package Manager，Node.js 的包管理器）。

2. 验证安装

   • 安装完成后，打开你的终端（在 Windows 上是 CMD 或 PowerShell，在 macOS 或 Linux 上是 Terminal）。
   • 输入以下命令并按回车：

     node -v

     如果显示版本号（如 v18.18.0），说明 Node.js 安装成功。

   • 再输入以下命令：

     npm -v

     如果也显示版本号（如 8.1），说明 npm 也安装好了。

     
     （图片来源网络，侵删）

第 2 步：创建项目并安装 Gulp

现在我们来为你的项目设置 Gulp。

1. 创建项目文件夹 在终端中，进入你想要存放项目的目录,然后创建一个新的项目文件夹并进入它。

   # 进入你的工作目录，D 盘
   cd D:
   # 创建一个名为 my-gulp-project 的文件夹
   mkdir my-gulp-project
   # 进入这个新文件夹
   cd my-gulp-project

2. 初始化 npm 项目 在项目文件夹中，运行 npm init 命令，这会创建一个 package.json 文件,用于管理项目的依赖和脚本。

   npm init -y

   • -y 参数表示使用所有默认设置，快速创建 package.json 文件，你可以手动运行不带 -y 的命令来填写更详细的信息。

3. 全局安装 Gulp（重要！） 为了在任何地方都能使用 gulp 这个命令,我们需要将其全局安装。

   npm install --global gulp-cli

   • --global 或 -g 表示全局安装，这样你就可以在系统的任何地方调用 gulp 命令。

4. 本地安装 Gulp 这是最关键的一步！ 除了全局安装，你必须在你的项目文件夹中本地安装 gulp。

   npm install --save-dev gulp

   • --save-dev 或 -D 表示将 gulp 作为项目的开发依赖保存到 package.json 文件中，这告诉其他开发者，这个依赖只在开发阶段需要,生产环境不需要。

   为什么需要本地安装？

   • 版本控制：本地安装确保了你的项目在任何机器上（包括你的生产服务器）都能使用指定版本的 Gulp,避免因版本不同导致的问题。
   • 项目隔离：不同项目可以使用不同版本的 Gulp,互不干扰。

第 3 步：创建你的第一个 Gulp 任务

现在环境已经搭好了，我们来创建一个最简单的任务：在终端打印 "Hello, Gulp!"。

1. 创建 gulpfile.js 在你的项目根目录（my-gulp-project）下，创建一个名为 gulpfile.js 的文件，这个文件是 Gulp 的配置文件,所有的任务都在这里定义。

2. 编写代码 用你喜欢的代码编辑器（如 VS Code）打开 gulpfile.js,并输入以下代码：

   // 1. 导入 gulp 模块
   const gulp = require('gulp');
   // 2. 定义一个名为 'hello' 的任务
   function helloTask(done) {
     console.log('Hello, Gulp!');
     // 3. 告诉 Gulp 这个任务已经完成
     // done 是一个回调函数，必须调用它来结束任务
     done();
   }
   // 4. 将这个任务注册为一个名为 'hello' 的可执行命令
   exports.hello = helloTask;

3. 运行任务 回到你的终端，确保你还在项目根目录下,运行以下命令：

   gulp hello

   如果一切顺利,你会在终端看到输出：

   [00:00:00] Using gulpfile ~/D/my-gulp-project/gulpfile.js
   [00:00:00] Starting 'hello'...
   Hello, Gulp!
   [00:00:00] Finished 'hello' after 2.36 ms

   恭喜！你已经成功运行了你的第一个 Gulp 任务！

第 4 步：创建一个实用的自动化任务（示例）

让我们创建一个更实用的任务来自动处理 CSS 文件,这个任务会：

1. 从 src/css/ 目录读取 .css 文件。

2. 自动添加浏览器前缀（-webkit-）。

3. 压缩 CSS 代码。

4. 将处理后的文件输出到 dist/css/ 目录。

5. 安装所需插件 我们需要两个插件：gulp-postcss（用于添加前缀）和 cssnano（用于压缩 CSS）,在终端中运行：

   npm install --save-dev gulp-postcss autoprefixer cssnano

6. 创建源文件和目标目录 在项目根目录下创建以下文件夹和文件：

   my-gulp-project/
   ├── src/
   │   └── css/
   │       └── style.css      <-- 你要处理的原始 CSS 文件
   ├── dist/
   │   └── css/              <-- 处理后的文件会放在这里
   └── gulpfile.js

   在 src/css/style.css 中写入一些需要添加前缀的 CSS 代码：

   /* src/css/style.css */
   .box {
     display: flex;
     transform: rotate(45deg);
   }

7. 更新 gulpfile.js 修改你的 gulpfile.js 文件，添加新的 CSS 处理任务：

   const gulp = require('gulp');
   const postcss = require('gulp-postcss');
   const autoprefixer = require('autoprefixer');
   const cssnano = require('cssnano');
   // 定义 CSS 处理任务
   function cssTask() {
     return gulp.src('src/css/*.css') // 1. 选择源文件
       .pipe(postcss([             // 2. 使用 postcss 插件处理
         autoprefixer(),          // 添加浏览器前缀
         cssnano()                // 压缩 CSS
       ]))
       .pipe(gulp.dest('dist/css')); // 3. 输出到目标目录
   }
   // 导出任务，使其可以通过 gulp 命令运行
   exports.css = cssTask;

8. 运行新任务 在终端运行：

   gulp css

   运行后，你会看到 dist/css/ 目录下多了一个 style.css 文件，打开它,你会发现代码已经被添加了前缀并被压缩了：

   /* dist/css/style.css */
   .box{-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}

常见问题与最佳实践

• gulpfile.js 中的 exports

  • 旧版本的 Gulp 使用 gulp.task() 来定义任务，新版本（Gulp 4+）推荐使用 exports 的方式，这样代码更简洁,且可以直接将函数作为任务导出。

• 默认任务 你可以创建一个名为 default 的任务，这样运行 gulp 命令时就会自动执行它。

  // 在 gulpfile.js 末尾添加
  exports.default = gulp.series(cssTask, helloTask); // series 表示按顺序执行

  然后在终端直接运行 gulp，它会先执行 css 任务，再执行 hello 任务。

• 监视文件变化 使用 gulp.watch 可以在文件发生变化时自动执行任务。

  function watchTask() {
    gulp.watch('src/css/*.css', cssTask); // 监视 src/css 目录下的所有 css 文件，当它们变化时，执行 cssTask
  }
  exports.default = gulp.series(cssTask, watchTask);

  这样，当你修改 src/css/style.css 并保存时，cssTask 会自动重新运行,非常方便！

安装 Gulp 的完整流程可以概括为：

1. 安装环境：下载并安装 Node.js（包含 npm）。
2. 初始化项目：npm init -y 创建 package.json。
3. 安装 Gulp：
   • 全局安装：npm install --global gulp-cli。
   • 本地安装：npm install --save-dev gulp。
4. 创建配置文件：在项目根目录创建 gulpfile.js。
5. 编写任务：在 gulpfile.js 中定义任务，并使用 gulp 命令运行。

希望这份详细的指南能帮助你成功安装并开始使用 Gulp！