gulp入门1-安装

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 两个任务了。