静态资源压缩可以优化网页的访问速度、提高用户体验

安装gulp

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

1
npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

1
npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：

1
npm install --save-dev gulp

安装gulp插件

1
2
3
4
5
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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
const { src, dest } = require('gulp');



function taskCss() {
  return src('./public/assets/**/*.css')
    .pipe(minifycss())
    .pipe(dest('./public/assets'));
}

function taskJs() {
  return src(['./public/assets/**/*.js','!./public/js/**/*min.js'])
    .pipe(uglify()) // gulp-uglify 插件并不改变文件名
    .pipe(dest('./public/assets', {overwrite: true}));
}

function defaultTask(cb) {
  taskCss()
  taskJs()
  cb();
}
exports.default = defaultTask

静态资源压缩

只要每次在执行hexo g命令后执行gulp就可以进行静态资源压缩，压缩后再同步到github上

1
2
3
hexo g
gulp
hexo d