使用 Gulp 优化网站速度并提升 SEO

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

如果你曾经用 Lighthouse 或任何页面速度分析工具测试过你的网站，你可能会失望地发现它很慢。真的……非常慢。

加载速度慢的主要缺点之一是会影响搜索引擎优化 (SEO)。

我的网站完全是用最基本的 JavaScript、CSS 和 HTML 搭建的，托管在 GitHub Pages 上，所以我没有对任何图片、HTML、CSS 或 JavaScript 进行压缩、精简或合并。当然，这是我刚从编程训练营出来后就着手做的。不过，我正在把它迁移到一个内容管理系统（CMS）上，具体来说是 Craft，因为它对开发者非常友好。我之前也考虑过 WordPress，因为我用它为一些客户项目搭建过网站。但最终我还是选择了 Craft。

在迁移过程中，我发现了 Gulp.js，一个 JavaScript 任务运行器，它能极大地简化工作流程，自动化繁琐的任务，并提升网页速度。那么，让我们开始吧。

安装

Gulp 的安装相当简单，您只需在全局 npm 中安装 gulp-cli 包，即可使用一些便捷的命令行工具。我假设您熟悉 npm 和前端开发。

如果你的机器上安装了 npm，你就可以在终端中运行这个命令。

npm install --global gulp-cli

如果您使用的是 WordPress 项目或其他基于模板的 CMS 或非框架风格的前端目录，则需要先在模板、主题或网站所在的根目录中初始化项目。

npm init

也可以选择使用默认的“yes”标志运行该命令，该标志不需要您输入任何内容。

npm init --y

这会在你使用 npm 初始化的同一目录下创建一个“package.json”文件。注意，你还需要添加一个“gitignore”文件，以便 git 知道不要保存“node_modules”文件夹，因为这个文件夹非常大。这里有一个相关的链接。

然后，在你初始化的目录中（无论是 React 网站、原生 JavaScript 网站、WordPress 网站，还是其他任何你命名的网站），运行以下命令：

npm install --save-dev gulp

这只是将 gulp 作为开发依赖项安装到您的项目中。

最后，你只需要在项目中创建一个名为“gulpfile.js”的文件。这个文件将存放我们用来自动化执行任务的gulp任务。

Gulp 最棒的地方在于，有很多聪明人编写了很棒的 Gulp 插件，这些插件可以压缩我们的 CSS、JS 或 HTML，并将我们想要的文件通过管道传递给插件。

我将向大家展示如何在我的个人网站上使用 gulp 来提升性能。

图像压缩

基本上，我的页面图片都非常大，压缩它们可以显著提升性能。我使用的 gulp 插件可以通过以下方式安装：

npm i gulp-imagemin --save-dev

现在，在我们的 gulpfile 文件中，我们将有：

'use strict';

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

“use strict”标志是JavaScript的一项约定，用于防止语言中出现一些奇怪的特性。我看到在gulpfile中添加这个标志是一种常见的做法，所以就照做了。

现在，要使用图像最小化功能，我们将使用以下代码。

var baseDir = "./src"
var targetDir = "."
gulp.task('imagemin', function() {
    return gulp.src(baseDir + '/assets/*')
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest(targetDir + '/images'))
})

上面的语法相当于告诉 Gulp 我们想要创建一个名为“imagemin”的任务，并传入一个执行特定操作的函数。具体来说，这个任务的函数会使用“gulp.src”属性，它的作用是“提取文件并对其进行一些处理”。就我个人而言，我希望 Gulp 在我的 src 文件夹中查找 assets 文件夹内的所有文件。这就是“*”符号的含义。当我们处理 CSS 和 JS 时，就需要告诉 Gulp 只查找特定类型的文件。

接下来，gulp 会将这些文件通过管道传递给我们安装的 imagemin 插件。我给它设置了一些基本的压缩选项：“imagemin.mozjpeg({quality: 75, progressive: true})” 和 “imagemin.optipng({optimizationLevel: 5})”，它们会分别对输入的 png 和 jpeg 文件进行不同的压缩。默认的压缩选项效果有限，所以请务必根据我提供的选项或其他网络资源进行调整。

最后一行指令将输出的压缩文件通过管道传输到目标目录下的“images”文件夹。这些就是我将要使用的压缩图像，我会将它们插入到HTML中的img标签中。

所以就你的情况而言，它应该看起来有点像这样

gulp.task('imagemin', function() {
    return gulp.src([Directory where images are])
    .pipe(imagemin([
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest([Directory where you want outputted images to live]))
})

要运行这个程序，我们只需要输入

gulp imagemin

在项目目录下的命令行中输入。

值得一提的是，Gulp 有一个插件可以让你输出不同尺寸的图片，以适应不同的响应式视口。例如，你可以分别输出适用于小屏幕、中屏幕和大屏幕的图片。你可以在这里查看。

CSS

与上面的例子一样，我们将通过运行以下命令来安装一个 css min 插件。

npm i gulp-clean-css --save-dev

我们的 Gulp 任务看起来会像这样

var cleanCSS = require("gulp-clean-css");
gulp.task('css', () => {
    return gulp.src(baseDir + '/css/*.css')
      .pipe(cleanCSS({compatibility: 'ie8'}))
      .pipe(gulp.dest(targetDir));
  });

然后就像上面的 imagemin 一样，我们在命令行中运行“gulp css”。

就像我们之前的 ImageMin 示例一样，这个示例将使用我指定的 baseDir 变量（保持代码简洁），并在 css 目录中查找所有 css 文件类型。然后，我们将该文件传递给 cleanCSS 插件，并通过管道将其输出到我们希望 CSS 文件最终存放的目录中。

JS

最后，我们还可以选择压缩 JavaScript 代码，甚至可以使用 Babel 将 ES6 代码转译成 ES5。我找到了一些关于压缩 JavaScript 代码的例子，还有一些关于编译的例子。但 Gulp 管道的优势在于，我可以将这些处理步骤串联起来。要压缩 JavaScript 代码，你需要安装……

npm i gulp-uglify gulp-concat gulp-rename --save-dev

如果你想使用 Babel 进行转译，你可以安装

npm i @babel/core @babel/preset-env gulp-babel --save-dev

这些在我的代码中协同工作看起来像这样

var rename = require('gulp-rename')
var babel = require('gulp-babel');
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')

gulp.task('js', function() {
    return gulp.src(baseDir + "/js/**/*.js")
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(concat('concat.js')) //this will concat all the files into concat.js
    .pipe(gulp.dest(baseDir + "/concat")) //this will save concat.js in a temp directory defined above
    .pipe(rename('index.js')) //this will rename concat.js to index.js
    .pipe(uglify()) //this will uglify/minify uglify.js
    .pipe(gulp.dest(targetDir + "/js"));
})

这有点复杂，但我们只需记住，`gulp.src` 属性会指定文件所在位置，并确保它们的文件类型为“.js”，然后将它们传递给 Babel 转译插件，再通过 Concatenate 插件将所有文件合并成一个文件。之后，我们将合并后的文件保存到一个临时目录中。接下来，我们将该文件传递给 Uglify 插件，该插件会对 JavaScript 进行压缩/压缩，最后将压缩后的文件保存到我们想要的目标目录中。

呼。

最后，我们用老牌的“gulp js”进行编译，瞧！我们把所有的大型代码优化压缩成了非常小巧、运行速度极快的 Web 代码。你猜怎么着？

非常感谢你耐心看到这里。Gulp 真的是个很棒的工具，如果搭配合适的插件，它能完成很多事情。