0%

Optimize Hexo With Gulp

Gulp is an open-source JavaScript toolkit created by Eric Schoffstall used as a streaming build system in front-end web development. We can use Gulp to compress the hexo static resources so that accessing our website is becoming faster. There are lots to learn about Gulp but to use it here on our Hexo webte is simple.

Install Gulp

1
$ npm install gulp -g

Install modules that will be used soon

1
$ npm install gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin del --save

Create a gulpfile.js file in the Hexo root folder with below scripts

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
69
70
71
72
73
74
75
76
77
78
79
80
81
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var Hexo = require('hexo');

gulp.task('clean', function() {
return del(['public/**/*']);
});

var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
hexo.init().then(function() {
return hexo.call('generate', {
watch: false
});
}).then(function() {
return hexo.exit();
}).then(function() {
return cb()
}).catch(function(err) {
console.log(err);
hexo.exit(err);
return cb(err);
})
});

gulp.task('deploy', function() {
return hexo.init().then(function() {
return hexo.call('deploy', {
watch: false
}).then(function() {
return hexo.exit();
}).catch(function(err) {
return hexo.exit(err);
});
});
});

gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});

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.task('minify-img', function() {
return gulp.src('./public/images/**/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('./public/images'))
});

gulp.task('compress', gulp.series('minify-html', 'minify-css', 'minify-img'));

gulp.task('default', gulp.series('clean', 'generate', 'compress', 'deploy'));

Notes:

  • Gulp throws an error, as gulp-uglify does not support es6 syntax. So I have remoeved it from the above script. But I heard that gulp-uglify-es may resolve this and will give it a try later. For now it will compress your css, html and image files only.

  • Gulp v4 has introduced some breaking changes and that creates problems with run-sequence package. Thus I used gulp.series instead of runSequence otherwise Gulp throws an error like “gulp.hasTask is not a function”.

  • Hexo clean, depoly and generate have also been added into the above js file, so next time when you wish to depoly your site instead of hexo clean && hexo g && hexo d && gulp simply use gulp!

    1
    $ gulp

Update_24Aug2019

gulp-uglify-es is working!

  • Install the plugin

    1
    $ npm install --save-dev gulp-uglify-es
  • Insert below to gulpfile.js

    1
    2
    3
    4
    5
    gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
    });

And then you are good to go! gulp


Reference:

- Official Website
- Sample of gulpfile.js for hexo generate blog, compress public files
- An Introduction to JavaScript Automation with Gulp
- gulp-uglify-es