壓縮 hexo 部落格
hexo 所產生出來的網站都是靜態的html
頁面,預設情形下到public
資料夾隨便打開檔案都會發現許多多餘的空白及換行 因此我們可以把這些東西消除,並且減少檔案體積、增加傳輸速度
你現在看的這個網站就是有經過壓縮的
安裝 gulp
在有package.json
的路徑下執行下面的指令
npm i -S gulp gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-pretty-data gulp-dom
gulp 是一個拿來批量構建一些東西用的工具我們會使用它加上其他的插件來幫 hexo 產生出來的檔案壓縮
設定
gulpfile.js
在package.json
同一層的目錄建立一個檔案名為gulpfile.js
檔案內容如下
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
//something....
"private": true,
"scripts": {
"build": "hexo clean && hexo g && gulp"
},
"dependencies": { //something....
完成
基本上這樣就完成了未來只要執行npm run build
就會自動產生檔案並壓縮,而執行hexo generate
只會產生檔案而不會壓縮
此外,gulpfile.js
其實還能做很多事來修改頁面上的一些東西,但我懶得寫文章詳細講 有興趣的可以來看看這個網站所用的 gulefile.js