Webpack不是唯一选择：构建工具Gulp的应用与探索

📝 Gulp概述

Gulp 是一款基于流的自动化构建工具，它相较于其他前端打包工具有许多优势。使用 Gulp 可以帮助前端开发者轻松地完成样式、图片、JS 等多类型资源的打包、压缩、合并、模块化等工作。

🎓什么是Gulp？

Gulp 是一款基于 Node.js 的自动化构建工具，它主要用于前端开发。通过 Gulp 的自动化构建，可以让前端开发者将大量繁琐的工作自动化完成，从而提高开发效率和代码质量。

🤔为什么选择Gulp？

选择 Gulp 作为前端打包工具，主要原因有以下几点：

0. 优秀的插件生态系统：Gulp 的插件生态系统非常丰富，可以满足大部分前端构建需求。开发者可以通过Gulp社区内的插件快速构建出所需的打包工具。
1. 易于学习和使用：Gulp 的 API 设计十分简洁明了，每个插件都有对应的 API，不仅易于上手它还支持更为灵活的配置。
2. 易于维护和扩展：Gulp 使用的是 Gulpfile.js 配置文件，不仅易于维护，而且很容易扩展和重用。
3. 快速构建：相对于其他自动化工具，Gulp 的打包速度非常快，能够极大地提高开发者的工作效率。

🚀Gulp 相较于其他自动化工具的优势

相较于其他前端打包工具，Gulp 的优势主要体现在以下几个方面：

0. 基于代码实现自动化构建：与其他自动化工具相比，Gulp 更加重视代码实现的自动化构建，这样的好处是代码更加精简高效，也更容易维护和优化。
1. 基于流的构建方式：Gulp 的工作方式是基于流的，能够实现非常高效的自动化构建，而不是像其他自动化工具那样针对文件逐一处理。
2. 易于扩展性和调试性：Gulp 的插件机制简单易用，能够轻松实现定制化的自动化构建需求。此外，由于 Gulp 支持同步和异步任务，开发者可以自行调整任务的顺序和结构，从而更好地完成自动化构建工作。

总的来说，Gulp 相较于其他前端打包工具具有良好的可扩展性、易维护性、高效性和易学性，是一个非常值得我们学习和使用的利器。

📝 Gulp的核心概念和原理

在第一部分中我们简单介绍了 Gulp 的概述和优势，本节将更进一步，深入讲解 Gulp 的核心概念和原理，包括如何使用 Gulp 构建工作流程、如何使用 Gulp 插件扩展功能等等。

👨‍💻 Gulp基本概念

在开始深入了解 Gulp 的工作流程和插件扩展之前，我们先介绍一些 Gulp 基本概念。在 Gulp 中，有以下几个核心概念：

• 任务(Task)：任务是 Gulp 中最核心的概念，每个任务实现一些具体的功能，比如压缩 CSS、JS、合并文件等等。在 Gulp 中，一个任务就是一个函数。
• 流(Stream)：Gulp 中的数据流(Stream)是 Node 中 Stream 的变体。经过一系列的管道处理，流中的数据会逐渐被加工成想要的最终结果。
• 插件(Plugin)：Gulp 中最大的特点就是插件机制，开发者可以通过各种插件来扩展 Gulp 的功能。一个插件就是函数或者命名的 Node 模块，可以通过 require('plugin-name')载入使用。

🚀 Gulp工作流程

Gulp 的工作流程是基于 Unix 命令行的管道机制，每个任务的输出都可以作为另一个任务的输入。通过这种方式，就能够构建出一个 Gulp 自动化的工作流程。下面是一个简单的 Gulp 工作流程的示例：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
​
gulp.task('compress-js', () => {
  return gulp.src('src/javascript/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('build/javascript'));
});
​
gulp.task('default', gulp.series('compress-js'));

在上面的代码中，我们通过调用 gulp.task() 方法来定义一个名为 compress-js 的 Gulp 任务，该任务读取与压缩 JavaScript 文件，并将结果输出到 build/javascript 目录下。接下来，我们通过调用 gulp.series() 方法来定义了一个名为 default 的任务，该任务串行执行 compress-js 任务。

在该示例中，我们使用了很多 Gulp 插件，如 gulp-uglify 和 gulp-concat 等等。这些插件通过 Gulp 的管道机制实现了文件的读取、处理和输出。

⚙️ Gulp插件机制

Gulp 插件机制是 Gulp 最大的特点之一。通过插件，开发者可以扩展 Gulp 的功能，使其能够满足更多的需求。Gulp 插件可以通过 npm安装后引入到项目中使用。Gulp 插件有两种类型：一种是函数式插件，也叫返回函数的插件，另一种是流式插件，即返回 Stream 的插件。

// 函数式插件
const gulp = require('gulp');
const babel = require('gulp-babel');
​
gulp.task('babel', () => {
  return gulp.src('src/**/*.js')
             .pipe(babel({
               presets: ['@babel/env']
             }))
             .pipe(gulp.dest('lib'));
});
​
// 流式插件
const gulp = require('gulp');
const concat = require('gulp-concat');
​
gulp.task('concat', () => {
  return gulp.src('src/**/*.js')
             .pipe(concat('all.js'))
             .pipe(gulp.dest('dist'));
});

在上述示例中，我们分别使用了函数式插件 gulp-babel 和流式插件 gulp-concat。这两个插件分别对 JS文件进行编译和合并。值得注意的是，插件的调用顺序必须与任务的执行顺序一致，否则会导致错误。

在gulp中，流式插件和函数式插件是两种不同的插件设计模式。

⚙️ 流式插件

流式插件（streaming plugin）是基于流式处理的插件，它通过流（stream）来处理文件，并返回一个新的流，通常是gulp的src()函数返回的vinyl对象流，因此对大文件的处理能力也极强。流式插件支持管道（pipe）连接，并且可以通过gulp的src()函数提供的文件过滤选项进行过滤。

例如，以下是一个简单的流式插件实现：

const { Transform } = require('stream');
​
function upperCase() {
  return new Transform({
    transform(chunk, encoding, callback) {
      this.push(chunk.toString().toUpperCase());
      callback();
    }
  });
}
​
exports.default = function() {
  return src('src/*.txt')
    .pipe(upperCase())
    .pipe(dest('dist/'));
};

⚙️ 函数式插件

函数式插件（function plugin）是基于函数式编程的插件，适合处理小文件。它以文件作为输入参数，并返回新的处理后的文件，通常是一个JavaScript对象。函数式插件不支持管道连接，不支持gulp的src()函数提供的文件过滤选项。

例如，以下是一个简单的函数式插件实现：

const { readFileSync, writeFileSync } = require('fs');
​
function upperCaseFile(file) {
  const contents = readFileSync(file.path).toString().toUpperCase();
  file.contents = Buffer.from(contents);
  return file;
}
​
exports.default = function() {
  return src('src/*.txt')
    .pipe(gulpFn(function(file) {
      return upperCaseFile(file);
    }))
    .pipe(dest('dist/'));
};

流式插件和函数式插件各有其优缺点，具体使用要根据实际需求进行选择。

对象流

在Gulp中，对象流是指基于Vinyl文件对象（Vinyl File Object）的流，在Gulp的处理过程中，所有的源文件、中间处理结果和输出文件都被抽象为一个个的Vinyl文件对象。

Vinyl文件对象是一个用于描述文件的JavaScript对象，它有若干个属性，常用的有以下几个：

• cwd: 文件所在的根目录（Current Working Directory），一个字符串，默认为 process.cwd()；
• base: 文件的基路径（Base Path），文件名不包括基路径，默认为 cwd；
• path: 文件的绝对路径；
• contents: 文件的内容(Buffer对象)。

当Gulp读取源文件时，它会把每个文件都抽象为一个Vinyl文件对象，并把这些对象传递到后续的处理流中，例如处理、过滤、转换等。在这些处理流之间，Vinyl文件对象流就被作为数据的传递渠道。

每个Gulp插件都可以对Vinyl文件对象进行处理，并将处理后的结果返回为新的Vinyl文件对象，这些新的Vinyl文件对象会继续传递到下一个插件中，最终被Gulp写入到指定的输出目录中。

因为Gulp的对象流基于Vinyl文件对象，所以插件开发者可以通过操作Vinyl文件对象，对文件进行不同层次的操作，例如读写、压缩，同时也可以使用Gulp提供的多个插件对文件进行链式处理，提高开发效率。

🔧 Gulp任务

Gulp 的工作流程是基于任务的概念。在 Gulp 中，每个任务都是一个函数，函数内部可以使用 Gulp 插件及其它 JavaScript 工具来完成具体的任务。在 Gulp 中，可以通过以下代码来定义一个任务：

gulp.task('task-name', () => {
  // 任务代码
});

在该代码中，我们使用了 gulp.task() 方法来定义了一个名为 task-name 的任务，其代码在箭头函数内部实现。定义好任务后，我们可以通过以下代码来运行任务：

gulp.task('run', gulp.series('task-name'));

在该代码中，我们使用了 gulp.series() 方法来定义了一个名为 run 的任务，其中 gulp.series() 方法用来将多个任务串行执行。同时，我们也可以省略参数，这样就可以直接运行任务：

gulp.task('task-name', () => {
  // 任务代码
});
​
gulp.task('default', gulp.series('task-name'));

在上述代码中，我们省略了 gulp.series() 参数，这样就可以通过 gulp 命令直接运行默认任务。

📦 Gulp和Webpack的比较

在前端自动化工具中，Gulp 和 Webpack都是非常重要的工具。那么，Gulp 和 Webpack 有什么区别呢？我们可以从以下几个方面来进行比较：

• 流程控制：Gulp 基于流程控制完成自动化构建，而 Webpack则基于依赖关系完成自动化构建。
• 功能：Gulp 可以完成诸如复制文件、压缩、合并等等任务，而 Webpack则主要用于将各种资源进行打包。
• 学习难度：相较于 Webpack，Gulp 的学习难度较低，容易上手和使用。
• 配置复杂度：Webpack的配置较为复杂，需要通过大量的配置文件和插件才能完成各类构建配置。而 Gulp 则需要根据项目需要灵活配置，编排任务。

总的来说，Gulp 和 Webpack 各有优劣，具体使用哪种工具还需要根据项目需求和个人喜好来进行选择。

📝 Gulp在前端工程化中的应用

在实际的前端项目中，Gulp 已经成为一种非常重要的前端工程化工具，它能够帮助开发者快速构建自动化构建流程，提高开发效率，减少错误。本节将会通过一个实际的前端项目，结合 Gulp 的各种功能，来演示如何使用 Gulp 实现前端工程化。

👨‍🏭 项目需求

我们的项目需求是：使用 Gulp 对前端代码进行构建，并在生产环境下实现代码的压缩和合并。具体而言，我们需完成以下几个任务：

0. CSS 模块化：将 CSS文件拆分成多个模块，并通过 Gulp 进行编译和压缩。
1. JS 模块化：将 JS文件拆分成多个模块，并通过 Gulp 进行编译和压缩，最终将多个 JS 文件合并成一个以减少 HTTP 请求。
2. 图片压缩：通过 Gulp 对图片文件进行压缩，以减小文件大小。
3. HTML压缩：通过 Gulp 对 HTML 文件进行压缩，以减小文件大小。
4. 实时监控：使用 Gulp 实现实时监控文件变化，以便在开发过程中自动更新。

🔨 Gulp实现

接下来，我们将按照需求依次介绍如何使用 Gulp 实现前端工程化。

0. CSS模块化

在进行 CSS模块化时，我们可以使用 Gulp 插件 gulp-sass 和 gulp-autoprefixer 分别实现 CSS编译和浏览器兼容性。同时，我们还需要使用 gulp-clean-css 插件对 CSS进行压缩。

const gulp = require('gulp');
const sass = require('gulp-sass');
const prefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css');
​
gulp.task('styles', () => {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(prefixer())
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'))
});

在上述代码中，我们定义了一个名为 styles 的 Gulp 任务，该任务读取 src/scss 目录下的所有 scss 文件并进行编译、浏览器兼容性处理和压缩，最终将结果输出到 dist/css 目录下。

2. JS模块化

在进行 JS模块化时，我们可以使用 Gulp 插件 gulp-babel 和 gulp-uglify 分别实现 JS编译和压缩。同时，我们还需要使用 gulp-concat 插件将多个 JS文件合并成一个以减少 HTTP 请求。

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
​
gulp.task('scripts', () => {
  return gulp.src('src/js/**/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
});

在上述代码中，我们定义了一个名为 scripts 的 Gulp 任务，该任务读取 src/js 目录下的所有 js 文件并进行编译、压缩和合并，最终将结果输出到 dist/js 目录下。

3. 图片压缩

在进行图片压缩时，我们可以使用 Gulp 插件 gulp-imagemin 实现。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
​
gulp.task('images', () => {
  return gulp.src('src/img/**/*.{jpg,png,gif,svg}') .pipe(imagemin()) .pipe(gulp.dest('dist/img')) });

在上述代码中，我们定义了一个名为 images 的 Gulp 任务，该任务读取 src/img 目录下的所有图片文件，并对其进行压缩，最终将结果输出到 dist/img 目录下。

4. HTML压缩

在进行 HTML 压缩时，我们可以使用 Gulp 插件 gulp-htmlmin 实现。

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
​
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ 
      collapseWhitespace: true, 
      removeComments: true 
    }))
    .pipe(gulp.dest('dist'))
});

5. 实时监控

在进行实时监控时，我们可以使用 Gulp 插件 gulp-watch 实现。

const gulp = require('gulp');
const watch = require('gulp-watch');
const runSequence = require('run-sequence');
​
gulp.task('watch', () => {
  runSequence(['styles', 'scripts', 'images', 'html']);
  watch('src/scss/**/*.scss', () => {
    gulp.start('styles');
  });
  watch('src/js/**/*.js', () => {
    gulp.start('scripts');
  });
  watch('src/img/**/*.{jpg,png,gif,svg}', () => {
    gulp.start('images');
  });
  watch('src/*.html', () => {
    gulp.start('html');
  });
});

在上述代码中，我们定义了一个名为 watch 的 Gulp 任务，该任务通过 gulp-watch 监控文件的变化，一旦文件发生变化，就会重新执行相应的任务。同时，我们还使用了 run-sequence 保证任务的顺序正确。

🚀 小结

在实际的前端项目中，Gulp 可以帮助我们快速构建自动化构建流程，提高开发效率，减少错误。本节通过一个实际的前端项目，从 CSS模块化、JS模块化、图片压缩、HTML压缩、实时监控等多个方面介绍了 Gulp 的实现方法和插件使用。掌握 Gulp 的各种功能并能灵活运用，可以有效地提高前端开发效率和代码质量。

🛠️ 常用Gulp插件介绍

在实际的前端项目中，Gulp 插件是非常重要且必要的，它们可以帮助我们完成各种各样的任务，从而实现前端工程化。本节将介绍一些常用的 Gulp 插件，并详细讲解它们的功能和应用场景，帮助读者深入了解 Gulp 插件的丰富性和灵活性。

🔌 常用插件介绍

0. gulp-rename

该插件可以帮助我们重命名文件。它非常灵活，可以支持多种重命名方式，如添加前缀、后缀或者完全更改文件名。在使用该插件时，我们需要注意文件路径的改变。

使用示例：

const gulp = require('gulp');
const rename = require('gulp-rename');
​
gulp.task('rename', () => {
  return gulp.src('src/file.js')
    .pipe(rename('new-file.js'))
    .pipe(gulp.dest('dist/js'));
});

在上述代码中，我们通过 gulp-rename 插件将 src/file.js 文件重命名为 new-file.js 并输出到 dist/js 目录下。

2. gulp-sass

该插件可以帮助我们将 Sass 文件编译成 CSS文件。它支持多种编译方式和选项，如输出样式、嵌套方式、自动添加前缀等等。在使用该插件时，我们需要先确保已经安装了 Sass。

使用示例：

const gulp = require('gulp');
const sass = require('gulp-sass');
​
gulp.task('styles', () => {
  return gulp.src('src/scss/styles.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

在上述代码中，我们通过 gulp-sass 插件将 src/scss/styles.scss 文件编译为 CSS，并输出到 dist/css 目录下。

3. gulp-autoprefixer

该插件可以帮助我们自动添加浏览器前缀，以解决浏览器兼容性问题。它可以设置需要支持的浏览器版本，同时也支持自定义前缀。

使用示例：

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
​
gulp.task('styles', () => {
  return gulp.src('src/css/styles.css')
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('dist/css'));
});

在上述代码中，我们通过 gulp-autoprefixer 插件自动为 src/css/styles.css 文件添加浏览器前缀，并输出到 dist/css 目录下。

4. gulp-concat

该插件可以将多个文件合并为一个文件，用于减少 HTTP 请求的数量。合并文件时，我们需要注意文件的顺序。

使用示例：

const gulp = require('gulp');
const concat = require('gulp-concat');
​
gulp.task('scripts', () => {
  return gulp.src('src/js/**/*.js')
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'));
});

在上述代码中，我们通过 gulp-concat 插件将 src/js 目录下的所有 JS文件合并为 main.js 并输出到 dist/js 目录下。

5. gulp-babel

该插件可以帮助我们解决 ES6代码在旧版浏览器上的兼容性问题。它能够将 ES6代码转换为 ES5 代码，从而支持旧版浏览器的执行。

使用示例：

const gulp = require('gulp');
const babel = require('gulp-babel');
​
gulp.task('scripts', () => {
  return gulp.src('src/js/**/*.js')
    .pipe(babel({
      presets:['@babel/env'] })) .pipe(gulp.dest('dist/js'));
});

在上述代码中，我们通过 gulp-babel 插件将 src/js 目录下的所有 JS文件进行 ES6到 ES5的转换，并输出到 dist/js 目录下。

6. gulp-uglify

该插件可以帮助我们压缩 JS文件，从而减小文件体积。它能够支持多种压缩方式，如去除注释、删除空白行、混淆变量名等等。

使用示例：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
​
gulp.task('scripts', () => {
  return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

在上述代码中，我们通过 gulp-uglify 插件压缩 src/js 目录下的所有 JS文件，并输出到 dist/js 目录下。

7. gulp-htmlmin

该插件可以帮助我们压缩 HTML 文件，从而减小文件体积。它能够支持多种压缩方式，如去除注释、删除空白行等等。

使用示例：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
​
gulp.task('html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ 
      collapseWhitespace: true 
    }))
    .pipe(gulp.dest('dist'));
});

在上述代码中，我们通过 gulp-htmlmin 插件压缩 src 目录下的所有 HTML 文件，并输出到 dist 目录下。

8. gulp-imagemin

该插件可以帮助我们压缩图片文件，从而减小文件体积。

使用示例：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
​
gulp.task('images', () => {
  return gulp.src('src/img/**/*.{jpg,png,gif,svg}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

在上述代码中，我们通过 gulp-imagemin 插件压缩 src/img 目录下的所有图片文件，并输出到 dist/img 目录下。

9. gulp-watch

该插件可以帮助我们实现文件变化时的实时监控，并在文件发生变化时自动执行相应的任务。

使用示例：

const gulp = require('gulp');
const watch = require('gulp-watch');
​
gulp.task('watch', () => {
  gulp.watch('src/scss/**/*.scss', ['styles']);
  gulp.watch('src/js/**/*.js', ['scripts']);
  gulp.watch('src/img/**/*.{jpg,png,gif,svg}', ['images']);
  gulp.watch('src/**/*.html', ['html']);
});

在上述代码中，我们通过 gulp-watch 插件实现了对 src 目录下的文件变化的实时监控，并在文件发生变化时，自动执行相应的 Gulp 任务。

🧰 小结

在实际的前端项目中，Gulp 插件是非常重要且必要的，它们可以帮助我们完成各种各样的任务，从而实现前端工程化。本节通过介绍常用的 Gulp 插件并详细讲解它们的功能和应用场景，帮助读者深入了解 Gulp 插件的丰富性和灵活性。熟练掌握 Gulp 插件的使用方法，可以帮助我们更高效地完成前端项目。

🚀 Gulp 实践案例

这里分享一个实际项目中使用 Gulp 的demo级案例，包括代码实现、实现思路等等。

假设我们有一个静态网站，所有的源代码都存储在 src 目录下，我们希望通过 Gulp 实现以下任务：

0. 将 SCSS 文件编译成 CSS 文件，并自动添加 CSS 前缀
1. 压缩 HTML文件
2. 压缩 JS 文件
3. 压缩图片文件

接下来，我们将详细介绍如何使用 Gulp 完成这些任务。

0. 安装依赖

在工程根目录中，使用以下命令安装所需的 Gulp 插件：

npm install gulp gulp-sass gulp-autoprefixer gulp-htmlmin gulp-uglify gulp-imagemin --save-dev

2. 创建 Gulpfile.js 文件

在工程根目录中，创建 Gulpfile.js 文件，并添加以下代码：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
​
gulp.task('sass', () => {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions']
    }))
    .pipe(gulp.dest('dist/css'));
});
​
gulp.task('html', () => {
  return gulp.src('src/**/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});
​
gulp.task('scripts', () => {
  return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});
​
gulp.task('images', () => {
  return gulp.src('src/img/**/*.{jpg,png,gif,svg}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});
​
gulp.task('watch', () => {
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/js/**/*.js', ['scripts']);
  gulp.watch('src/img/**/*.{jpg,png,gif,svg}', ['images']);
});
​
gulp.task('default', ['sass', 'html', 'scripts', 'images', 'watch']);

在此代码中，我们使用了 Gulp 的四个核心插件：gulp-sass、gulp-htmlmin、gulp-uglify、gulp-imagemin，以及其他辅助插件 gulp-autoprefixer，同时定义了一个 watch 任务，用于在文件发生变化时自动监视并执行相关的任务。

代码解析：

• sass 任务：将 SCSS文件编译成 CSS文件，并自动添加 CSS前缀，完成后将文件输出到 dist/css 目录下。
• html 任务：压缩 HTML文件，完成后将文件输出到 dist 目录下。
• scripts 任务：压缩 JS文件，完成后将文件输出到 dist/js 目录下。
• images 任务：压缩图片文件，并将文件输出到 dist/img 目录下。
• watch 任务：实现自动监视文件变化的功能，当文件发生变化时自动执行相关的任务。
• default 任务：默认任务，指定需要执行的任务队列，包括 sass、html、scripts、images 和 watch 任务。

3. 运行 Gulp

在工程根目录中，使用以下命令运行 Gulp：

gulp

然后，Gulp 将执行我们定义的任务，并自动编译和压缩相关的文件。

至此，我们已经成功地使用 Gulp 完成了 SCSS编译、HTML、JS和图片。

更多详细内容可查阅官方文档。