Another problem is that hexo’s HTML, CSS and JS are not compressed, which is bad because it wastes resources on the server & slows down the download speed of users.

So I continued to use Google to search for a solution, and then I saw that my predecessors had already encountered this problem. The link in the original text is put at the end, here to sort out the process.

Why do we need compression

Through compression can obviously reduce the volume of static resources, speed up the response.

Using gulp

We use gulp to define the compression task to be performed, and the actual compression is performed by the following modules:

  • clean-css
  • htmlclean
  • htmlmin
  • imagemin
  • uglify-js

Each module has a corresponding Gulp Wrapper module.

We need to add the following dependencies to the package.json file:

"Del" : "^ 2.2.2", "gulp" : "^ 3.9.1", "gulp - clean - CSS" : "^" 2.3.2, # compress CSS "gulp - htmlclean" : "^" 2.7.8, # processing HTML "gulp - htmlmin" : "^ 3.0.0", # compressed HTML "gulp - imagemin" : "^ 3.1.1", # compressed images "gulp - uglify" : "^" 2.0.1, # processing js "run - sequence" : "^ 1.2.2" # control task execution orderCopy the code

Then we need to install the module:

npm install
Copy the code

Then we need to write our gulpfile.js:

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 runSequence = require('run-sequence'); var Hexo = require('hexo'); Gulp.task ('clean', function() {return del(['public/**/*']); }); // Use the Hexo API to generate blog content, effects and run on the command line: // Generate HTML with 'hexo generate' 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); })}) // Compress all CSS gulp.task('minify- CSS ', function() { return gulp.src('./public/**/*.css') .pipe(minifycss({ compatibility: 'ie8' })) .pipe(gulp.dest('./public')); }); // Compress all 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')) }); // Compress all js gulp.task('minify-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); }); // Compress all img files in the public directory: Gulp. task('minify-img', Function () {return gulp. SRC (".. / public/images / / *. * * * '). The pipe (imagemin ()), pipe (gulp. Dest ('.. / public/images')}) / / same as above, Compress pictures, here used: maximum compression effect. gulp.task('minify-img-aggressive', function() { return gulp.src('./public/images/**/*.*') .pipe(imagemin( [imagemin.gifsicle({'optimizationLevel': 3}), imagemin.jpegtran({'progressive': true}), imagemin.optipng({'optimizationLevel': 7}), imagemin.svgo()], {'verbose': Gulp.dest ('./public/images'))}) img gulp.task('compress', function(cb) { runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive'], cb); }); // Order of execution: Gulp. Task ('build', function(cb) {runSequence('clean', 'generate', 'compress', cb) }); gulp.task('default', ['build'])Copy the code

The compression can then be performed using the gulp build command, which automatically executes clean and generate, or hexo clean for those in need

So our final deployment script is as follows:

hexo clean
gulp build
hexo d
Copy the code

Done!

Reference source: www.karlzhou.com/articles/co…