Gulp 壓縮 Hexo Blog

Gulp 是什麼

Gulp 是一個任務管理工具,可以可以執行設定的工作

  • 轉譯 html, css, js
  • 壓縮 .css, .js 及圖檔等其它功能

消除多餘空白及換行減少檔案體積以利於檔案傳輸,減少網頁訪問時間

安裝 Gulp

Gulp 目前最新版是 4.0

安裝 Gulp 需先安裝全域的一次,再本地環境安裝一次,參考 Gulp

$ npm i gulp -g
$ [~/blog] npm i gulp --save

安裝後確認版本

$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

同時需要安裝以下插件:

npm i gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

編輯 gulpfile.js

在 blog 根目錄下新增 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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 壓縮 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'))
});
// 壓縮 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 壓縮 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 壓縮圖片
gulp.task('minify-images', function() {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin(
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/images'))
});
// 預設任務
gulp.task('default', gulp.parallel(
'minify-html','minify-css','minify-js','minify-images'
));

一鍵佈署

在 package.json 中加入以下 script

"scripts": {
"push": "hexo cl && hexo g && gulp && hexo d"
}

佈署時只需要執行

$ npm run push

參考資料
Gulp 官方
Gulp GItHub
Gulp 環境安裝 | 卡斯伯
hexo 优化之——使用 gulp 压缩资源
利用gulp对Hexo博客压缩并一键之部署
使用 Gulp 4.0 新的(CLI)命令行界面

0%