博客的构建流水线是怎么跑的

Wed, 05 Mar 2025 16:30:00 +0000

文章写完之后, 总不能手动一条条部署. 自动化的目的很简单: push 完代码就什么都不用管了.

本质上就两件事: 把 Markdown 变成静态文件扔到网上去, 顺便把构建流程自动化.

Gulp 任务

整个构建就两个 Gulp 任务, 串行跑:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

一行代码. 调用 Hugo 构建, --buildFuture 允许发布未来日期的内容, --minify 在构建时做 HTML/CSS/JS 压缩.

为什么用 gulp-shell 而不是直接调用 Hugo? 因为后续需要在构建完成后做一些处理, Gulp 作为编排工具把任务串起来比较方便. 如果用 npm script 串命令也可以, 但 Gulp 的 task 定义更清晰, 错误处理也更直接.

generate-service-worker

gulp.task('generate-service-worker', () => {
 return workbox.generateSW({
 globDirectory: './public',
 globPatterns: ['**/*.{woff2,woff,js,css,png.jpg}'],
 globIgnores: ['sw.js'],
 swDest: `./public/sw.js`,
 clientsClaim: true,
 skipWaiting: true,
 runtimeCaching: [
 { urlPattern: /.*\.js/, handler: 'NetworkFirst' },
 { urlPattern: /.*\.css/, handler: 'StaleWhileRevalidate' },
 { urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif)/,
 handler: 'CacheFirst',
 options: { cacheName: 'images', expiration: { maxEntries: 50 } } },
 { urlPattern: /.*\.html/, handler: 'NetworkFirst' }
 ]
 })
 .then(() => console.info('Service Worker 生成完成'))
 .catch(error => console.warn('Service Worker 生成失败: ' + error));
});

这个任务用 Workbox 自动生成 SW, 具体原理和缓存策略在 PWA 与 Service Worker 那篇里讲了.

Gulp on Time Friend

博客的构建流水线是怎么跑的

Gulp 任务

build

generate-service-worker