抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >


使用 Gulp 对 Hexo 静态资源进行压缩

资源依赖

使用 npm install --save-dev 安装依赖包。

package.json
"devDependencies": {
"@babel/core": "^7.28.4",
"@babel/preset-env": "^7.28.3",
"gulp": "^5.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-html-minifier-terser": "^7.1.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-sourcemaps": "^3.0.0",
"gulp-terser": "^2.1.0"
}

压缩 CSS 文件

// 压缩css文件
const minify_css = () => (
gulp.src(['./public/**/*.css', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(sourcemaps.init())
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public'))
);

压缩 JS 文件

// 压缩html文件
const minify_html = () => (
gulp.src(['./public/**/*.html', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
)

压缩 HTML 文件

// 压缩html文件
const minify_html = () => (
gulp.src(['./public/**/*.html', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
)

调用

gulp.task('minify', gulp.parallel(
minify_html,
minify_css,
minify_js
))

gulp.task('default', gulp.series('minify'));

完整压缩脚本

gulpfile.js
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const htmlmin = require('gulp-html-minifier-terser');
const htmlclean = require('gulp-htmlclean');
const terser = require('gulp-terser');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');

// 压缩css文件
const minify_css = () => (
gulp.src(['./public/**/*.css', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(sourcemaps.init())
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public'))
);

// 压缩html文件
const minify_html = () => (
gulp.src(['./public/**/*.html', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
)

// 压缩js文件
const minify_js = () => (
gulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}'])
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(terser({
ecma: 2015,
ie8: true,
safari10: true,
output: { comments: false }
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public'))
)

gulp.task('minify', gulp.parallel(
minify_html,
minify_css,
minify_js
))

gulp.task('default', gulp.series('minify'));

相关文档

参考文档:

gulp

gulp-html-minifier-terser

gulp-htmlclean

gulp-htmlmin

gulp-clean-css

gulp-terser

gulp-sourcemaps

gulp-babel

推荐阅读
Glob 表达式 Glob 表达式 Django中引用静态文件 Django中引用静态文件 Hexo Hexo 关于 Hexo 的文档链接 关于 Hexo 的文档链接 静态站点URL优化与部署配置:适配Cloudflare Pages和Vercel的路径方案解析 静态站点URL优化与部署配置:适配Cloudflare Pages和Vercel的路径方案解析 网站纪念日自动灰屏实现方案 网站纪念日自动灰屏实现方案

留言区

Are You A Robot?