Gulp - 快速指南

---

Gulp - 概述

什么是Grunt？

Gulp 是一个使用 Node.js 作为平台的任务运行器。Gulp 纯粹使用 JavaScript 代码，有助于运行前端任务和大型 Web 应用程序。它构建系统自动化任务，例如 CSS 和 HTML 缩小、连接库文件以及编译 SASS 文件。这些任务可以在命令行上使用 Shell 或 Bash 脚本运行。

为什么要使用 Gulp？

• 与其他任务运行程序相比，它更短、更简单、更快。
• 使用 SASS 和 LESS 作为 CSS 预处理器。
• 编辑源文件后自动刷新页面。
• 易于理解和构建 Gulpfile.js，因为它使用纯 JavaScript 代码来构建任务。

历史

Gulp 的所有文档均受 CC0 许可证保护。最初，Gulp v1.0.0 于 2015 年 1 月 15 日发布，当前版本为v3.9.0。

特征

• 提供缩小和串联。
• 使用纯 JavaScript 代码。
• 将 LESS 或 SASS 转换为 CSS 编译。
• 使用 Node.js 平台管理内存中的文件操作并提高速度。

优点

• 与任何其他任务运行程序相比具有巨大的速度优势
• 易于编码和理解。
• 轻松测试 Web 应用程序..
• 插件使用起来很简单，它们被设计成一次只做一件事。
• 重复执行重复性任务，例如缩小样式表、压缩图像等。

缺点

• 与 Grunt 相比，依赖项数量更多并且是新来者。
• 使用 Gulp 插件，您无法执行多个任务。
• 配置不像 Grunt 那样干净。

Gulp - 安装

本文提供了 Gulp 安装的分步过程。

Gulp 的系统要求

• 操作系统- 跨平台

• 浏览器支持- IE (Internet Explorer 8+)、Firefox、Google Chrome、Safari、Opera

安装 Gulp

步骤 1 - 我们需要 Node.js 来运行 Gulp 示例。要下载 Node.js，请打开https://nodejs.org/en/，您将看到如下所示的屏幕 -

下载 zip 文件的最新功能版本。

步骤 2 - 接下来，运行安装程序以在计算机上安装NodeJ 。

步骤 3 - 您需要设置环境变量。

路径用户变量

• 右键单击我的电脑。
• 选择属性。
• 选择“高级”选项卡并单击“环境变量”。

• 在环境变量窗口下，双击 PATH，如下图所示。

• 您将看到一个编辑用户变量窗口，如以下屏幕截图所示。在变量值字段中添加 Node.js 文件夹路径为 C:\Program Files\nodejs\node_modules\npm。如果已经为其他文件设置了路径，则需要在其后添加分号（;）并添加 Node.js 路径，如下图所示。

最后，单击“确定”按钮。

系统变量

• 在“系统变量”下，双击“路径”，如下图所示。

• 您将看到一个编辑系统变量窗口，如以下屏幕截图所示。在变量值字段中添加 Node.js 文件夹路径为C:\Program Files\nodejs\并单击“确定”，如以下屏幕截图所示。

步骤 4 - 打开系统中的命令提示符并输入以下命令。它将显示已安装的 Node.js 版本。

node -v

步骤 5 - 在命令提示符中，输入以下命令以显示用于安装模块的 npm（Node.js 包管理器）的版本。它将显示已安装的 Node.js 版本。

npm -v

步骤 6 - 在命令提示符中，输入以下命令来安装 Gulp。添加“-g”标志可确保 Gulp 对任何项目全局可用。

npm install gulp -g

步骤 7 - 要验证 Gulp 是否已成功安装，请输入以下命令以显示 Gulp 版本。

gulp -v

Gulp - 基础知识

在本章中，您将熟悉一些与 Gulp 相关的基础知识。

什么是构建系统？

构建系统被称为任务集合（统称为任务运行器），它自动执行重复性工作。

以下是可以使用构建系统处理的一些任务的列表 -

• 预处理 CSS 和 JavaScript 的编译。
• 缩小文件以减小其大小。
• 将文件串联成一个。
• 触发服务器自动重新加载。
• 创建部署构建以将生成的文件存储在一个位置。

在现代前端工作流程中，构建系统使用 3 个组件 -

• 包管理器
• 预处理器
• 任务运行器和构建工具

包管理器

它用于自动安装升级、删除所需的依赖项、清理开发环境中使用的库和包。包管理器的示例是Bower和npm。

预处理器

预处理器通过添加优化的语法和编译为本机语言的附加功能，对于高效的现代工作流程非常有用。

一些流行的预处理器是 -

• CSS - SASS、LESS 和 Stylus。

• JS - CoffeeScript、LiveScript、TypeScript 等

• HTML - Markdown、HAML、Slim、Jade 等

任务运行器

任务运行程序可自动执行 SASS 到 CSS 转换、缩小文件、优化图像以及开发工作流程中使用的许多其他任务等任务。Gulp 是现代前端工作环境中的任务运行器之一，它运行在 Node.js 上。

设置您的项目

例如，要在计算机中设置项目，请创建一个名为“work”的文件夹。工作文件夹包含以下子文件夹和文件 -

• Src - 预处理的 HTML 源文件和文件夹的位置。

  • 图像- 包含未压缩的图像。

  • 脚本- 包含多个预处理的脚本文件。

  • 样式- 包含多个预处理的 CSS 文件。

• Build - 该文件夹将自动创建，其中包含生产文件。

  • 图像- 包含压缩图像。

  • 脚本- 包含精简代码的单个脚本文件。

  • 样式- 包含精简代码的单个 CSS 文件。

• gulpfile.js - 它是配置文件，用于定义我们的任务。

Gulp - 开发应用程序

在前面的章节中，您学习了Gulp 安装和Gulp 基础知识，包括 Gulp 的构建系统、包管理器、任务运行器、Gulp 的结构等。

在本章中，我们将了解开发应用程序的基础知识，其中包括以下内容 -

• 声明所需的依赖项
• 为依赖项创建任务
• 运行任务
• 正在看任务

依赖声明

当您为应用程序安装插件时，需要指定插件的依赖关系。依赖项由包管理器（例如 Bower 和 npm）处理。

让我们使用一个名为gulp-imagemin 的插件在配置文件中定义它的依赖项。该插件可用于压缩图像文件，并可以使用以下命令行安装 -

npm install gulp-imagemin --save-dev

您可以将依赖项添加到配置文件中，如以下代码所示。

var imagemin = require('gulp-imagemin');

上面的行包含该插件，并且它作为名为imagemin的对象包含在内。

为依赖项创建任务

Task 支持采用模块化方法来配置 Gulp。我们需要为每个依赖项创建一个任务，当我们找到并安装其他插件时，我们会添加该任务。Gulp 任务将具有以下结构 -

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是字符串名称，“function()”执行您的任务。“gulp.task”将函数注册为名称中的任务，并指定对其他任务的依赖关系。

您可以为上面定义的依赖项创建任务，如以下代码所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

图像位于src/images/**/*中，保存在 img_srcobject 中。它通过管道传输到 imagemin 构造函数创建的其他函数。它压缩 src 文件夹中的图像，并通过使用代表目标目录的参数调用dest方法将图像复制到构建文件夹。

运行任务

Gulp 文件已设置并准备好执行。在项目目录中使用以下命令来运行任务 -

gulp imagemin

使用上述命令运行任务时，您将在命令提示符中看到以下结果 -

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Gulp - 组合任务

Task 支持采用模块化方法来配置 Gulp。我们需要为每个依赖项创建任务，当我们找到并安装其他插件时，我们会添加这些任务。Gulp 任务将具有以下结构 -

gulp.task('task-name', function() {
   //do stuff here
});

其中“task-name”是字符串名称，“function()”执行您的任务。“gulp.task”将函数注册为名称中的任务，并指定对其他任务的依赖关系。

安装插件

让我们使用一个名为minify-css 的插件来合并和缩小所有 CSS 脚本。可以使用 npm 安装它，如以下命令所示 -

npm install gulp-minify-css --save-dev

要使用“gulp-minify-css插件”，您需要安装另一个名为“gulp-autoprefixer”的插件，如以下命令所示 -

npm install gulp-autoprefixer --save-dev

要连接 CSS 文件，请安装 gulp-concat，如以下命令所示 -

npm install gulp-concat --save-dev

安装插件后，您需要在配置文件中写入依赖项，如下所示 -

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

将任务添加到 Gulp 文件

我们需要为每个依赖项创建任务，我们将在安装插件时添加这些任务。Gulp 任务将具有以下结构 -

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

'concat' 插件连接 CSS 文件，'autoprefix' 插件指示所有浏览器的当前版本和以前的版本。它会缩小 src 文件夹中的所有 CSS 脚本，并通过使用参数（代表目标目录）调用“dest”方法将其复制到构建文件夹。

要运行该任务，请在项目目录中使用以下命令 -

gulp styles

同样，我们将使用另一个名为“gulp-imagemin”的插件来压缩图像文件，可以使用以下命令安装该插件 -

npm install gulp-imagemin --save-dev

您可以使用以下命令将依赖项添加到配置文件 -

var imagemin = require('gulp-imagemin');

您可以为上面定义的依赖关系创建任务，如以下代码所示。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

图像位于“src/images/**/*”中，保存在 img_srcobject 中。它通过管道传输到“imagemin”构造函数创建的其他函数。它压缩 src 文件夹中的图像，并通过使用代表目标目录的参数调用“dest”方法将图像复制到构建文件夹。

要运行该任务，请在项目目录中使用以下命令 -

gulp imagemin

组合多个任务

您可以通过在配置文件中创建默认任务来一次运行多个任务，如以下代码所示 -

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulp 文件已设置并准备好执行。在项目目录中运行以下命令来运行上述组合任务 -

gulp

使用上述命令运行任务时，您将在命令提示符中得到以下结果 -

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

GruntGrunt - 手表

Watch 方法用于监视您的源文件。当对源文件进行任何更改时，手表将运行适当的任务。您可以使用“默认”任务来监视 HTML、CSS 和 JavaScript 文件的更改。

更新默认任务

在上一章中，您已经学习了如何使用默认任务来合并任务。我们使用了 gulp-minify-css、gulp-autoprefixer 和 gulp-concatplugins，并创建了样式任务来缩小 CSS 文件。

要观看 CSS 文件，我们需要更新“默认”任务，如以下代码所示：

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

将监视work/src/styles/文件夹下的所有 CSS 文件，并对这些文件进行更改后，将执行样式任务。

运行默认任务

使用以下命令运行“默认”任务。

gulp

执行上述命令后，您将收到以下输出。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

每当对 CSS 文件进行任何更改时，您都会收到以下输出。

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

监视进程将保持活动状态并响应您的更改。您可以按Ctrl+C终止监控进程并返回命令行。

Gulp - 实时重新加载

实时重新加载指定文件系统中的更改。BrowserSync用于监视 CSS 目录中的所有 HTML 和 CSS 文件，并在文件发生更改时在所有浏览器中实时重新加载页面。BrowserSync 通过跨多个设备同步 URL、交互和代码更改来加快工作流程。

安装 BrowserSync 插件

BrowserSync插件提供跨浏览器CSS注入，可以使用以下命令安装。

npm install browser-sync --save-dev

配置 BrowserSync 插件

要使用 BrowserSync 插件，您需要在配置文件中写入依赖项，如以下命令所示。

var browserSync = require('browser-sync').create();

您需要为BrowserSync创建任务才能使用 Gulp 与服务器一起工作。由于您正在运行服务器，因此您需要向 BrowserSync 询问服务器的根目录。在这里，我们使用基本目录作为“build”。

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})

您还可以使用以下 CSS 文件任务将新样式注入浏览器。

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

在为 BrowserSync 创建任务之前，您需要使用包管理器安装插件，并按照本章中的定义在配置文件中写入依赖项。

完成配置后，运行BrowserSync和watchTask以实现实时重新加载效果。我们不会单独运行两个命令行，而是通过添加browserSynctask和 watchTask来一起运行它们，如以下代码所示。

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});   

在项目目录中运行以下命令来执行上述组合任务。

gulp

使用上述命令运行任务后，您将在命令提示符中得到以下结果。

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

它将打开 URL 为http://localhost:3000/ 的浏览器窗口。对 CSS 文件所做的任何更改都会反映在命令提示符中，并且浏览器会自动重新加载更改后的样式。

Gulp - 优化 CSS 和 JavaScript

在本章中，您将学习如何优化 CSS 和 JavaScript。需要进行优化以从源文件中删除不必要的数据（例如空格和未使用的字符）。它减少了文件的大小并允许它们更快地加载

安装插件来优化 CSS 和 JavaScript

从命令行转到“work”目录并使用以下命令安装“gulp-uglify”、“gulp-minify-css”和“gulp-concat”插件 -

npm install gulp-uglify gulp-minify-css gulp-concat

声明依赖关系并创建任务

在配置文件gulpfile.js中，首先声明依赖项，如以下代码所示。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

接下来，您需要创建优化 CSS 和 JavaScript 的任务，如以下代码所示。

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

js任务将从src/scripts/文件夹接受.js文件。它连接并丑化js文件，然后生成build/scripts/script.js文件。

CSS任务将接受src/styles/文件夹中的.css文件。它连接并缩小CSS文件，然后生成build/styles/styles.css文件。

运行任务

配置文件已设置并准备好执行。使用以下命令运行任务。

gulp

使用上述命令运行任务时，您将在命令提示符中收到以下结果。

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Gulp - 优化图像

在本章中，您将学习如何优化图像。优化将减小图像的大小并有助于加快加载速度。

安装插件来优化图像

从命令行转到“work”目录，并使用以下命令安装“gulp-changed”和“gulp-imagemin”插件。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

声明依赖关系并创建任务

在配置文件gulpfile.js中，首先声明依赖项，如以下命令所示。

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

接下来，您需要创建优化图像的任务，如以下代码所示。

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

imagemin任务将从src/images/文件夹接受 png、jpg 和 gif 图像，并在将其写入目标之前缩小它们。Changed ()确保每次只传递新文件进行缩小。gulp 更改后的插件将仅处理新文件，因此占用了宝贵的时间。

运行任务

配置文件已设置并准备好执行。使用以下命令运行任务。

gulp

使用上述命令运行任务时，您将在命令提示符中收到以下结果。

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp - 有用的插件

Gulp 提供了一些有用的插件来处理 HTML 和 CSS、JavaScript、图形以及下表中所述的其他一些内容。

HTML 和 CSS 插件

JavaScript 插件

单元测试插件

图形插件

编译器插件

其他插件

Gulp - 清理不需要的文件

在本章中，您将学习如何清理生成的文件。由于我们会自动生成文件，因此请确保在运行构建之前删除不必要的文件。这个过程称为清洁。del插件可以用于此目的。

安装del插件

在命令行中输入以下命令来安装插件。

npm install del --save-dev

声明依赖关系并创建任务

在配置文件gulpfile.js中，声明依赖项，如以下命令所示。

var del = require('del');

接下来，创建一个任务，如以下代码所示。

gulp.task('clean:build', function() {
   return del.sync('build');
});

上述任务将清理整个构建。clean 任务会清除所有图像捕获并删除构建中存在的所有旧文件。

可以仅清理特定的文件或文件夹，并保持其中一些不受影响，如以下代码所示。

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

在上述任务中，仅清理临时文件夹，而package.json保持不变。