站点访问速度总是让人不满意,想快,那就使劲折腾吧。
gulp 静态资源压缩
采用 gulp 对静态资源进行压缩,提升访问速度。
什么是 Gulp
gulp.js 是一种基于流的,代码优于配置的新一代构建工具.官方文档
Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 I/O 操作,Gulp 的流操作,能更快地完成构建
Gulp 特性
- 使用方便
- 通过代码优于配置的策略,Gulp 可以让简单的任务简单,复杂的任务更可管理。
- 构建快速
- 通过流式操作,减少频繁的 IO 操作,更快地构建项目。
- 插件高质
- Gulp 有严格的插件指导策略,确保插件能简单高质的工作。
- 易于学习
- 少量的 API,掌握 Gulp 可以毫不费力。构建就像流管道一样,轻松加愉快。
安装插件
首先安装 gulp 以及所需要的模块:
npm install gulp -g
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
添加代码
然后在根目录下创建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')
// 压缩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'))
})
// 压缩css
gulp.task('minify-css', function() {
return gulp
.src('./public/**/*.css')
.pipe(
minifycss({
compatibility: 'ie8'
})
)
.pipe(gulp.dest('./public'))
})
// 压缩js
gulp.task('minify-js', function() {
return gulp
.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'))
})
// 压缩图片
gulp.task('minify-images', function() {
return gulp
.src('./public/images/**/*.*')
.pipe(
imagemin(
[
imagemin.gifsicle({ optimizationLevel: 3 }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 7 }),
imagemin.svgo()
],
{ verbose: true }
)
)
.pipe(gulp.dest('./public/images'))
})
// 默认任务
gulp.task(
'default',
gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')
)
部署上传
- hexo clean
- hexo g
- gulp
- hexo d
在 gulp 的过程中可能会遇到问题,根据问题排除就可以了~,没啥大问题的。