使用gulp压缩博客静态资源

为什么要压缩博客静态资源?

在页面加载过程中，HTML、CSS、JavaScript等资源文件的大小都会对页面加载速度产生影响，因此，为了提高页面加载的速度和用户体验，压缩这些文件是非常必要的。

具体来说，压缩可以在不影响文件功能的前提下，去除无关空格、注释、多余代码等内容，从而减小文件大小，优化传输速度。更小的文件大小可以加快下载速度，减少网络带宽使用，同时也有助于减少服务器负载并提高页面加载速度，改善用户体验。

通过压缩，可以将文件大小降低30%~90%不等，对于特别大的文件可能能够看到数百KB的差异。更重要的是，很多CDN服务商也提供了对已压缩文件响应的缓存，这意味着您可以在没有修改文件内容的情况下继续使用压缩后的文件。

因此，在构建优化的网站或网络应用时，压缩HTML、CSS、JavaScript等文件非常重要。仅此一举可以极大地提升网站性能，改善用户体验。

什么是gulp?

Gulp是一个功能强大的前端构建工具，可以自动化完成开发相关的任务，比如文件压缩、图片优化、文件合并、自动刷新浏览器等。它基于Node.js平台，使用JavaScript语言编写，通过gulpfile.js配置文件来执行一系列指定任务。

使用Gulp可以大幅提高前端开发效率，减少手动操作，规范化开发流程，同时也具有非常强的扩展能力，支持众多插件来满足各种开发需求。以下是一些常见的用途：

• 压缩HTML、CSS、JavaScript等网页资源，以减小文件大小并加快网页加载速度；
• 编译和转换Sass/Less/Stylus等预处理器语言为浏览器可识别的CSS；
• 合并零散的CSS或JS文件，减少HTTP请求；
• 自动检测代码变化并自动刷新浏览器；
• 自动生成文档、样式表等文件；
• 使用ES6、TypeScript等高级语言进行开发，并通过Babel转译成低版本的JavaScript，以兼容老旧的浏览器；
• 管理依赖包和升级版本；
• 自动部署、打包等。

总的来说，Gulp可以帮助开发人员更高效地进行各种构建、测试和部署工作，进一步加快应用程序的开发和发布流程。

gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。

使用gulp压缩博客静态文件

1. 安装gulp

   npm install --global gulp-cli
   npm install gulp --save

2. 安装gulp插件

   • 压缩HTML

     npm install gulp-htmlclean --save-dev
     npm install gulp-html-minifier-terser --save-dev
     # 用gulp-html-minifier-terser可以压缩HTML中的ES6语法

   • 压缩CSS

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

   • 压缩JavaScript

     npm install gulp-terser --save-dev

   • 压缩字体

     npm install gulp-fontmin --save-dev

     font-min仅支持压缩ttf格式的字体包，输出字体文件时支持输出：ttf、woff、eot及svg四种格式。使用gulp压缩 TTF 的原理是读取所有 HTML 文件从而得出我们需要的字符集，然后从 TTF 文件中提取出我们需要的字体，然后输出到指定目录中，所以当没有执行 gulp 任务的时候，就不会在目录中生成压缩后的文件。

3. 在根目录创建gulpfile.js

   //用到的各个插件
   var gulp = require('gulp');
   var cleanCSS = require('gulp-clean-css');
   var htmlmin = require('gulp-html-minifier-terser');
   var htmlclean = require('gulp-htmlclean');
   var fontmin = require('gulp-fontmin');
   // gulp-tester
   var terser = require('gulp-terser');
   // 压缩js
   gulp.task('compress', async() =>{
     gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
       .pipe(terser())
       .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'))
   });
   //压缩字体
   function minifyFont(text, cb) {
     gulp
       .src('./public/fonts/*.ttf') //原字体所在目录
       .pipe(fontmin({
         text: text
       }))
       .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
       .on('end', cb);
   }
   
   gulp.task('mini-font', (cb) => {
     var buffers = [];
     gulp
       .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
       .on('data', function(file) {
         buffers.push(file.contents);
       })
       .on('end', function() {
         var text = Buffer.concat(buffers).toString('utf-8');
         minifyFont(text, cb);
       });
   });
   // 运行gulp命令时依次执行以下任务
   gulp.task('default', gulp.parallel(
     'compress', 'minify-css', 'minify-html','mini-font'
   ))

4. 一键四连

   hexo cl;hexo g;gulp;hexo s
   或
   hexo cl;hexo g;gulp;hexo d