告别重复劳动：Gulp.js 新手入门教程

烛阴2025-08-01 21:11

一、 Gulp 是什么？

Gulp 是一个基于 Node.js 的自动化构建工具。我们可以使用它在项目开发过程中自动执行常见的任务。

二、入门准备：安装 Gulp

全局安装 Gulp：
bash 复制代码
```
npm install --global gulp-cli
```
在项目中安装 Gulp：
bash 复制代码
```
npm install --save-dev gulp
```

三、Gulpfile

Gulp 的所有配置和任务都写在一个名为 gulpfile.js 的文件中，你需要手动在项目根目录下创建它。

Gulp 的 API 非常精简，掌握下面四个核心方法，你就基本入门了：

gulp.src(): 指向需要处理的源文件。
gulp.dest(): 指定处理后文件的输出路径。
gulp.task(): 定义一个 Gulp 任务。
gulp.watch(): 监听文件的变化，自动执行相应的任务。

四、你的第一个 Gulp 任务

让我们来创建一个实际的任务：压缩 JavaScript 文件。

安装插件： 我们需要一个用于压缩 JS 的插件，这里选用 gulp-uglify。
bash 复制代码
```
npm install --save-dev gulp-uglify
```

编写 gulpfile.js：

javascript 复制代码

// 首先引入 gulp 和需要使用的插件
const gulp = require('gulp');
const uglify = require('gulp-uglify');

// 定义一个名为 'scripts' 的任务
gulp.task('scripts', function() {
  // 1. 找到源文件
  return gulp.src('src/js/*.js')
    // 2. 通过 pipe() 方法进行处理
    .pipe(uglify())
    // 3. 输出到指定目录
    .pipe(gulp.dest('dist/js'));
});

这段代码定义了一个名为 scripts 的任务。它会找到 src/js/ 目录下的所有 .js 文件，使用 uglify 插件进行压缩，然后将压缩后的文件输出到 dist/js/ 目录下。

运行任务： 在终端中执行：
bash 复制代码
```
gulp scripts
```
执行完毕后，你就可以在 dist/js 目录下看到被压缩后的 JS 文件了。

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货