gulp入门1-安装

devtools/2024/10/15 5:41:19/

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); // 串行运行两个任务