自动化部署hexo

By hiluluke on

作为一名小前端,对于页面的优化肯定是有追求的。本文将利用gulp来压缩hexo生成的文件,并利用npm命令自动部署我们的博客。

添加gulp

首先你需要全局安装gulp: npm install -g gulp

然后在你的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
25
26
27
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 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'))
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css'
]);

在上面如你所看到,有用4个node_modules,需要安装一下:

1
2
3
4
npm install --save-dev gulp
npm install --save-dev gulp-minify-css
npm install --save-dev gulp-htmlmin
npm install --save-dev gulp-htmlmin

另外我并没有压缩合并js,我觉得这是主题应该做的。因为hexo的html和css是hexo生成的,而js是最开始写好就直接移动到public的。我觉得压缩js应该主题做,比如这个主题

添加自动部署命令

在package.json里面添加如下命令:

1
2
3
"scripts": {
"build": "hexo clean && hexo g && gulp && hexo d"
},

然后运行npm run build,我们就会自动删除老文件,生成新文件,压缩html、css然后发布到github或其他静态服务器资源。