The websites generated by Hexo are static html pages. By default, if you open any file in the public folder, you will find many unnecessary spaces and line breaks. Therefore, we can remove these to reduce file size and increase transmission speed.

The website you are currently viewing has been compressed.

Installing gulp#

Run the following command in the path where package.json is located:

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

Gulp is a tool used for batch building various things. We will use it along with other plugins to compress the files generated by Hexo.

Configuration#

gulpfile.js#

Create a file named gulpfile.js in the same directory as package.json. The content of the file is as follows:

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#

Next, open package.json and add a scripts block with a string build, and set its value to hexo clean && hexo g && gulp.

//something....
"private": true,
"scripts": {
 "build": "hexo clean && hexo g && gulp"
},
"dependencies": { //something....

Completion#

Basically, this completes the setup. In the future, just run npm run build to automatically generate and compress files, while running hexo generate will only generate files without compressing them.

Additionally, gulpfile.js can actually do many things to modify elements on the page, but I'm too lazy to write a detailed article about it. If you're interested, you can check out the gulpfile.js used by this website.