Gulp简介

一个可以自动压缩 HTML、JS、CSS 文件、图片，
可以将 ES6 语法转换成 ES5，减少网络请求，同时降低网络负担

准备环境

首先全局安装 gulp

1
npm install --global gulp-cli

安装压缩 HTML

1
2
npm install gulp-htmlclean --save-dev
npm install --save gulp-html-minifier-terser

安装压缩 CSS

1
npm install gulp-clean-css --save-dev

安装压缩 JS
这里我选择 gulp-uglify + gulp-babel，可以把 ES6 转换成 ES5，因为兼容所以选择

1
2
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env

插件都安装完毕后，在博客的根目录创建文件：gulpfile.js
然后粘贴代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')
// 压缩js
gulp.task('compress', () =>
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify().on('error', function (e) {
      console.log(e)
    }))
    .pipe(gulp.dest('./public'))
)
// 压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, 	  // 清除 html 注释
            collapseWhitespace: true, // 压缩 html
            collapseBooleanAttributes: true,
            // 省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            // 删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            // 删除<style>和<link>的 type="text/css"
            minifyJS: true, 	// 压缩页面 JS
            minifyCSS: true, 	// 压缩页面 CSS
            minifyURLs: true 	// 压缩页面 URL
        }))
        .pipe(gulp.dest('./public'))
});

// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html'
))

使用压缩方法

1
hexo cl; hexo g; gulp; hexo d

错误信息解析

Local gulp not found in ~\Desktop\xxx

  • 这表示在 ~\Desktop\xxx 这个项目目录中，Gulp 工具没有被安装。

Try running: npm install gulp

  • 这是一个建议，提示你可以通过运行 npm install gulp 来安装 Gulp，这样本地的 Gulp 工具就会被正确安装到项目的 node_modules 目录中。

1.安装 Gulp

1
npm install gulp

2.检查项目的 package.json 文件

  • 确保你的项目的 package.json 文件中有 Gulp 的依赖。如果没有，你可以手动添加：
1
2
3
"devDependencies": {
  "gulp": "^4.0.2"  // 你可以指定适合你的版本
}

如果你想从项目中删除 Gulp 和相关的依赖，可以按照以下步骤操作：

  1. 删除本地 Gulp
  • 在项目根目录下，打开终端（命令行），然后运行以下命令：
1
npm uninstall gulp --save-dev
  • 这会从 node_modules 文件夹和 package.json 的 devDependencies 中删除 Gulp。
  1. 删除 Gulp 插件
  • 如果你安装了其他 Gulp 插件（如 gulp-clean-css、gulp-uglify 等），也可以通过以下命令逐个删除：
1
npm uninstall gulp-clean-css gulp-uglify gulp-htmlmin gulp-sass --save-dev
  • 根据你实际安装的插件，调整命令中的插件名称。
  1. 删除全局 Gulp（如果安装了全局版本）
  • 如果你全局安装了 Gulp（通过 -g 参数），可以运行以下命令卸载全局 Gulp：
1
npm uninstall -g gulp
  1. 删除 Gulp 配置文件
  • 如果你的项目中有 gulpfile.js 文件，可以将其删除。如果你不再使用 Gulp，这个文件是多余的。
1
rm gulpfile.js
  1. 删除其他相关文件（可选）

如果你使用了 Gulp 的任务配置文件或其他相关文件，可以根据需要删除它们。一般来说，这些文件包括：

gulpfile.js
任何与 Gulp 相关的配置文件

  1. 清理 npm 缓存（可选）
    虽然通常不是必需的，但如果你希望清理缓存以释放空间，可以运行以下命令：
1
npm cache clean --force
  1. 确保更新 package.json
  • 在卸载 Gulp 和插件之后，package.json 文件中的 devDependencies 部分会自动更新，删除相关的 Gulp 和插件条目。你可以手动检查 package.json，确保不再列出这些依赖。
  1. 确保项目正常运行
  • 在删除 Gulp 及其相关插件后，确保你的项目可以正常构建和运行。如果你之前的构建任务依赖于 Gulp，可能需要重新配置构建流程或者使用其他工具来替代 Gulp。
  1. 使用命令行来列出已安装的 npm 包：
1
npm list --depth=0
  • 这个命令会列出所有直接安装的包（包括 Hexo 插件）及其版本号。
  1. 卸载未使用的插件
1
npm uninstall <plugin-name> --save