本文最后更新于 2024-10-18，文章内容距离上一次更新已经过去了很久啦，可能已经过时了，请谨慎参考喵。 

title: 博客开启Gulp压缩
tags:
  - Hexo
  - gulp
categories:
  - Hexo
top_img: false
cover: '/upload/cdn0files/20200726104727.jpeg'
copyright: false
abbrlink: bfd9586f
date: 2020-07-26 10:45:29
updated: 2020-07-26 11:45:29

警告！我用这个压缩几次后出现 bug 导致网站 CSS 样式丢失，慎重使用

Gulp 压缩

Gulp 是一款自动化构建的工具，拥有众多的插件。而我们只需要使用到几个插件来压缩 Html/css/js。

安装

npm install --global gulp-cli

压缩 HTML

可以使用 gulp-htmlclean 和 gulp-htmlmin 来压缩 HTML

npm install gulp-htmlclean --save-dev
npm install --save gulp-htmlmin

压缩 CSS

可以使用 gulp-clean-css 来压缩 CSS

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

压缩 JS

由于 Butterfly 主题中的 JS 使用到了部分 ES6 语法，因此不能只使用 gulp-uglify 来压缩，还需要搭配其它的插件。两种搭配都可以有效的压缩 JS 代码，选一种适合自己的就行。

terser 是 ES6+ 的 JavaScript 解析器

gulp-babel 是一个 JavaScript 转换编译器，可以把 ES6 转换成 ES5

npm install --save-dev gulp-uglify
npm install terser

或者：

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

两种选一种即可

压缩图片

使用 gulp-imagemin 来压缩图片

cnpm install --save-dev gulp-imagemin

警告：亲身体验，用 npm 安装此插件会报错无法构建，但我用 cnpm 安装成功了！！！

创建 gulpfile 文件

在 Hexo 的根目录，创建一个 gulpfile.js 文件：

var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var htmlclean = require('gulp-htmlclean')
var imagemin = require('gulp-imagemin')
// tester (如果使用tester,把下面4行前面的//去掉)
// var uglifyjs = require('terser')
// var composer = require('gulp-uglify/composer')
// var pump = require('pump')
// var minify = composer(uglifyjs, console)

// babel (如果不是使用bebel,把下面两行註释掉)
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')

// minify js - babel（ 如果不是使用bebel,把下面註释掉）
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'))
)

// minify js - tester (如果使用tester,把下面前面的//去掉)
// gulp.task('compress', function (cb) {
//   var options = {}
//   pump([
//     gulp.src(['./public/**/*.js', '!./public/**/*.min.js']),
//     minify(options),
//     gulp.dest('./public')
//   ],
//   cb
//   )
// })

// css
gulp.task('minify-css', () => {
  return gulp.src('./public/**/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('./public'))
})

// 压缩 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
    }))
    .pipe(gulp.dest('./public'))
})

// 压缩 public/uploads 目录内图片
gulp.task('minify-images', async () => {
  gulp.src('./public/img/**/*.*')
    .pipe(imagemin({
      optimizationLevel: 5, // 类型：Number  预设：3  取值範围：0-7（优化等级）
      progressive: true, // 类型：Boolean 预设：false 无失真压缩jpg图片
      interlaced: false, // 类型：Boolean 预设：false 隔行扫描gif进行渲染
      multipass: false // 类型：Boolean 预设：false 多次优化svg直到完全优化
    }))
    .pipe(gulp.dest('./public/img'))
})

// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html', 'minify-images'
))

注意： 如果有使用到 Butterfly 主题提供的 mermaid 标签外挂，那需要把 52 行 .pipe(htmlclean()) 注释掉，同时，把 55 行的 collapseWhitespace: true , 改为 false

运行

在执行 hexo g 之后执行 gulp 即可

Gulp + PWA

如果你开启了 PWA ，那么可以使用下面的 gulpfile.js 配置：

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var workbox = require("workbox-build");
// babel
var uglify = require('gulp-uglify');
var babel = require('gulp-babel');
//tester
// var uglifyjs = require("terser");
// var composer = require('gulp-uglify/composer');
// var pump = require('pump');
// var minify = composer(uglifyjs, console);

//pwa
gulp.task('generate-service-worker', () => {
  return workbox.injectManifest({
    swSrc: './sw-template.js',
    swDest: './public/sw.js',
    globDirectory: './public',
    globPatterns: [
        "**/*.{html,css,js,json,woff2}"
    ],
    modifyURLPrefix: {
        "": "./"
    }
  });
});

//minify js babel
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'))
);

//minify js tester
// gulp.task('compress', function (cb) {
//   var options = {};
//   pump([
//     gulp.src(['./public/**/*.js', '!./public/**/*.min.js']),
//     minify(options),
//     gulp.dest('./public')
//   ],
//   cb
//   );
// });

//css
gulp.task('minify-css', () => {
  return gulp.src('./public/**/*.css')
    .pipe(cleanCSS({
      compatibility: 'ie11'
    }))
    .pipe(gulp.dest('./public'));
});


// 压缩 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
    }))
    .pipe(gulp.dest('./public'))
});

// 压缩 public/uploads 目录内图片
gulp.task('minify-images', async () => {
  gulp.src('./public/img/**/*.*')
    .pipe(imagemin({
      optimizationLevel: 5, //类型：Number  预设：3  取值範围：0-7（优化等级）
      progressive: true, //类型：Boolean 预设：false 无失真压缩jpg图片
      interlaced: false, //类型：Boolean 预设：false 隔行扫描gif进行渲染
      multipass: false, //类型：Boolean 预设：false 多次优化svg直到完全优化
    }))
    .pipe(gulp.dest('./public/img'));
});

// 执行 gulp 命令时执行的任务
gulp.task("default", gulp.series("generate-service-worker", gulp.parallel(
    'compress','minify-html', 'minify-css', 'minify-images'
)));

作者: Jerry
連結: https://demo.jerryc.me/posts/4073eda/#%E5%8F%83%E8%80%83
來源: Butterfly
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。