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压缩博客静态资源