gulp可以自动压缩html/css/js静态资源文件,减少空间,加快网页打开速度。
gulp更新到4.0.2变更了语法,只需要把最后执行的代码 gulp.parallel 改成 gulp.series 即可。
BUG:butterfly主题更新到4.x后,会导致搜索功能无法使用,建议使用terser压缩方式。
gulp.task ('default' , gulp.parallel ('compress' , 'minify-css' , 'minify-html' , 'minify-images' )) gulp.task ('default' , gulp.series ('compress' , 'minify-css' , 'minify-html' )) 
首先要安装gulp和插件:
#全局安装gulp指令集 npm install --global gulp-cli #安装gulp插件 npm install gulp --save #压缩html npm install gulp-htmlclean --save-dev #压缩HTML中的ES6语法 npm install gulp-html-minifier-terser --save-dev #压缩CSS npm install gulp-clean-css --save-dev #压缩JS npm install gulp-uglify --save-dev npm install gulp-babel @babel/core @babel/preset-env --save-dev npm install gulp-terser --save-dev #压缩字体 npm install gulp-fontmin --save 
在博客根目录创建gulpfile.js脚本文件,输入以下内容:
完整代码如下:
babel压缩JS bug:可能导致搜索功能不可用,建议换成terser压缩方式 
const  gulp = require ('gulp' )const  cleanCSS = require ('gulp-clean-css' )const  htmlmin = require ('gulp-html-minifier-terser' )const  htmlclean = require ('gulp-htmlclean' )const  imagemin = import ('gulp-imagemin' )const  uglify = require ('gulp-uglify' )const  babel = require ('gulp-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' )) ) gulp.task ('minify-css' , () =>  {   return  gulp.src ('./public/**/*.css' )     .pipe (cleanCSS ())     .pipe (gulp.dest ('./public' )) }) gulp.task ('minify-html' , () =>  {   return  gulp.src ('./public/**/*.html' )     .pipe (htmlclean ())     .pipe (htmlmin ({       removeComments : true ,        collapseWhitespace : true ,        collapseBooleanAttributes : true ,        removeEmptyAttributes : true ,        removeScriptTypeAttributes : true ,        removeStyleLinkTypeAttributes : true ,        minifyJS : true ,        minifyCSS : true ,        minifyURLs : true       }))     .pipe (gulp.dest ('./public' )) }) gulp.task ('default' , gulp.series ('compress' , 'minify-css' , 'minify-html' )) 
tester压缩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' );var  terser = require ('gulp-terser' );gulp.task ('compress' , async () =>{   gulp.src (['./public/**/*.js' , '!./public/**/*.min.js' ])     .pipe (terser ())     .pipe (gulp.dest ('./public' )) }); gulp.task ('minify-css' , () =>  {     return  gulp.src (['./public/**/*.css' ])         .pipe (cleanCSS ({             compatibility : 'ie11'          }))         .pipe (gulp.dest ('./public' )); }); gulp.task ('minify-html' , () =>  {     return  gulp.src ('./public/**/*.html' )         .pipe (htmlclean ())         .pipe (htmlmin ({             removeComments : true ,              collapseWhitespace : true ,              collapseBooleanAttributes : true ,                          removeEmptyAttributes : true ,                          removeScriptTypeAttributes : true ,                          removeStyleLinkTypeAttributes : true ,                          minifyJS : true ,              minifyCSS : true ,              minifyURLs : true            }))         .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' ])      .on ('data' , function (file ) {       buffers.push (file.contents );     })     .on ('end' , function ( ) {       var  text = Buffer .concat (buffers).toString ('utf-8' );       minifyFont (text, cb);     }); }); gulp.task ('default' , gulp.series (   'compress' , 'minify-css' , 'minify-html' ,'mini-font'  )) 
最后命令用法:
hexo clean hexo generate gulp hexo server 或 hexo deploy 
参考文章:使用gulp压缩博客静态资源