# 引言

# gulp工作流构建

# 环境

本地环境如下

hexo: 6.2.0
hexo-cli: 4.3.0
os: darwin 21.5.0 12.4

node: 18.0.0
v8: 10.1.124.8-node.13
uv: 1.44.1
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
unicode: 14.0

# 插件安装

主要从 js/css/image/html 几个方面进行压缩

npm install gulp-cli --global
npm install gulp --save
npm install gulp-uglify-es --save
npm install gulp-clean-css --save
npm install gulp-imagemin --save
npm install gulp-html-minifier-terser --save

# 任务脚本编写

在博客工作目录下新建文件 gulpfile.js, 写入如下 gulp 任务配置代码(详细描述见注释)

const gulp = require('gulp');
const cleancss = require('gulp-clean-css');
const uglify = require('gulp-uglify-es').default;
const htmlmin = require('gulp-html-minifier-terser');
const htmlclean = require('gulp-htmlclean');
const imagemin = require('gulp-imagemin')

// 压缩public目录下的css文件
// 可接受参数的文档: https://github.com/jakubpawlowicz/clean-css#constructor-options
// 工作目录src排除一些目录: https://stackoverflow.com/questions/23384239/excluding-files-directories-from-gulp-task
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css', '!./public/resource/**/*.css'])
        // 处理public目录下所有的css文件，下同
        .pipe(cleancss({ compatibility: 'ie8' }))
        // 兼容到IE8
        .pipe(gulp.dest('./public'));
});

// 压缩public目录下的js文件
gulp.task('minify-js', () => {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/resource/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

// 压缩图片
gulp.task('minify-images', function () {
    return gulp.src(['./public/**/*.*', '!./public/images/**/*.*', '!./public/resource/**/*.*'])
        .pipe(imagemin(
            [imagemin.gifsicle({ optimizationLevel: 3, interlaced: true }),
            imagemin.mozjpeg({ quality: 75, progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo()],
            { 'verbose': true }))
        .pipe(gulp.dest('./public'))
});

// 压缩public目录下的html文件
// 可接受参数的文档: https://github.com/terser/html-minifier-terser#options-quick-reference
gulp.task('minify-html', () => {
    return gulp.src(['./public/**/*.html', '!./public/resource/**/*.html'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,                 // 移除注释
            removeEmptyAttributes: true,          // 移除值为空的参数
            removeRedundantAttributes: true,      // 移除值跟默认值匹配的属性
            collapseBooleanAttributes: true,      // 省略布尔属性的值
            collapseWhitespace: true,             // 移除空格和空行
            minifyCSS: true,                      // 压缩HTML中的CSS
            minifyJS: true,                       // 压缩HTML中的JS
            minifyURLs: true                      // 压缩HTML中的链接
        }))
        .pipe(gulp.dest('./public'))
});

// 默认任务，不带任务名运行gulp时执行的任务
gulp.task('default', gulp.parallel(
    'minify-css', 'minify-js', 'minify-images', 'minify-html'
), function () {
    console.log("----------gulp Finished----------");
});

# 结语