静态资源压缩可以优化网页的访问速度、提高用户体验
-
安装gulp
在站点目录下
npm install gulp -g
npm link gulp
或者
npm install gulp --save
-
安装gulp插件
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
-
创建
gulpfile.js文件
在Hexo站点下创建gulpfile.js文件
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
gulp.src('./public/demo/**/*.*')
.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/uploads'));
});
// 默认任务 gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'
//build the website
));
-
静态资源压缩
只要每次在执行hexo g命令后执行gulp就可以进行静态资源压缩，压缩后再同步到github上
hexo g
gulp
hexo d
