壓縮 hexo 部落格

發表於 分類於

hexo 所產生出來的網站都是靜態的html頁面，預設情形下到public資料夾隨便打開檔案都會發現許多多餘的空白及換行 因此我們可以把這些東西消除，並且減少檔案體積、增加傳輸速度

你現在看的這個網站就是有經過壓縮的

安裝 gulp

在有package.json的路徑下執行下面的指令

1
npm i -S gulp gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-pretty-data gulp-dom

gulp 是一個拿來批量構建一些東西用的工具我們會使用它加上其他的插件來幫 hexo 產生出來的檔案壓縮 gulp logo

設定

gulpfile.js

在package.json同一層的目錄建立一個檔案名為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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var gulp = require('gulp')
var cleancss = require('gulp-clean-css')
var uglify = require('gulp-uglify')
var htmlmin = require('gulp-htmlmin')
var htmlclean = require('gulp-htmlclean')
var prettyData = require('gulp-pretty-data')
var dom = require('gulp-dom')

gulp.task('css', function() {
	//處理css
	return gulp
		.src('./public/**/*.css')
		.pipe(cleancss({ compatibility: 'ie8' }))
		.pipe(gulp.dest('./public'))
})
gulp.task('html', function() {
	//處理html
	return gulp
		.src('./public/**/*.html')
		.pipe(
			dom(function() {
				//這會把每個外連的連結加上rel="noopener noreferrer"(為了安全性)
				var links = Array.from(this.querySelectorAll('a'))
				links.filter(link => link.target === '_blank').forEach(link => (link.rel = 'noopener noreferrer'))
				return this
			})
		)
		.pipe(htmlclean())
		.pipe(
			htmlmin({
				removeComments: true,
				minifyJS: true,
				minifyCSS: true,
				minifyURLs: true
			})
		)
		.pipe(gulp.dest('./public'))
})
gulp.task('js', function() {
	//處理javascript
	return gulp
		.src('./public/**/*.js')
		.pipe(uglify())
		.pipe(gulp.dest('./public'))
})
gulp.task('xml-json', function() {
	//處理xml與json(選擇性，如果不要的話就把這一段移除掉並把下面'xml-json'也移除)
	return gulp
		.src('./public/**/*.(xml|json)')
		.pipe(
			prettyData({
				type: 'minify',
				preserveComments: true,
				extensions: {
					xlf: 'xml',
					svg: 'xml'
				}
			})
		)
		.pipe(gulp.dest('public'))
})
gulp.task('default', [
	//執行tasks
	'css',
	'html',
	'js',
	'xml-json'
])

package.json

接下來打開package.json 新增一個scripts的區塊，裡面有個字串build，值填入hexo clean && hexo g && gulp

1
2
3
4
5
6
//something....
"private": true,
"scripts": {
 "build": "hexo clean && hexo g && gulp"
},
"dependencies": { //something....

完成

基本上這樣就完成了未來只要執行npm run build就會自動產生檔案並壓縮，而執行hexo generate只會產生檔案而不會壓縮

此外，gulpfile.js其實還能做很多事來修改頁面上的一些東西，但我懶得寫文章詳細講 有興趣的可以來看看這個網站所用的 gulefile.js