用自动化构建工具增强你的工作流程！

Update

最近升级 hexo，顺带也升级了 gulp 的依赖，运行 gulp 之后，报 GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected token: punc «)» 错误，其实还是依赖没搞对， gulp-uglify 不识别 es6 的问题，想着博客项目也不考虑什么兼容性了，果断换插件。

先删除多余的插件:

npm uninstall\
 gulp-babel@7\
 babel-core\
 babel-preset-env\
 babel-preset-es2015\

之后安装 gulp-uglify-es，它使用 Terser 压缩代码(支持 es6)，非常人性化:

npm install gulp-uglify-es --save-dev

最后gulpfile 里面这样改：

......
const uglify = require('gulp-uglify-es').default; // 引用 gulp-uglify-es
......

// 压缩 js
function minifyJS() {
	return gulp
		.src('./public/js/**/*.js')
		.pipe(uglify()) // 直接压缩即可
		.pipe(gulp.dest('./public'));
}
......
......

———————— 以下为原文 ————————

一些关于 Gulp的基础概念

任务

首选要明确的一点是，gulp 中的每个任务都是一个 javascript 异步函数。处理异步任务，最基础也最常用的就是 error-first callbacks , 但是 gulp 也支持流、promises、async/await 等等其他异步方式，根据自己的需要进行选择即可，我们这里选用的就是返回流的方式。

Globs

代表一串文字和/或通配符，如 *, **, 或 !，用于匹配文件路径。例如： ./public/js/**.js 代表匹配当前 public/js 目录下的所有 js文件。

插件

Gulp 插件实质上是 Node 转换流（Transform Streams），它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。

插件是用来转换文件的，可以简化我们的操作，让我们快速上手。我们这次也是使用了很多的插件，比如压缩文件、压缩图片等 gulp 插件。

实操

引入依赖:

npm install\
 gulp gulp-minify-css\
 gulp-uglify\
 gulp-htmlmin\
 gulp-htmlclean\
 gulp-imagemin\
 --save-dev

这里面遇到个问题，因为 gulp-uglify 压缩 js 文件的时候，遇见 ES6 语法会报错，因此我们还需要引入下 babel 的插件，先转换下语法再压缩文件：

npm install\
 gulp-babel@7\
 babel-core\
 babel-preset-env\
 babel-preset-es2015\
 --save-dev

运行 hexo g 之后，会生成可发布的 public 文件夹，因为我们的 gulp 任务，都是基于此文件夹操作的。

const gulp = require('gulp');
const minifycss = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const htmlclean = require('gulp-htmlclean');
const imagemin = require('gulp-imagemin');
const babel = require('gulp-babel');

// 压缩 js
function minifyJS() {
	return gulp
		.src('./public/js/**/*.js')
		.pipe(babel({ presets: ['es2015'] })) // 先转换语法
		.pipe(uglify())
		.pipe(gulp.dest('./public'));
}

// 压缩html
function minifyHTML() {
	return gulp
		.src('./public/**/*.html')
		.pipe(htmlclean())
		.pipe(
			htmlmin({
				removeComments: true,
				minifyJS: true,
				minifyCSS: true,
				minifyURLs: true,
			}),
		)
		.pipe(gulp.dest('./public'));
}

// 压缩css
function minifyCSS() {
	return gulp
		.src('./public/**/*.css')
		.pipe(
			minifycss({
				compatibility: 'ie8',
			}),
		)
		.pipe(gulp.dest('./public'));
}

// 压缩图片
function minifyIMG() {
	return gulp
		.src('./public/images/**/*.*')
		.pipe(
			imagemin(
				[
					imagemin.gifsicle({ optimizationLevel: 3 }),
					imagemin.mozjpeg({ progressive: true }),
					imagemin.optipng({ optimizationLevel: 7 }),
					imagemin.svgo(),
				],
				{ verbose: true },
			),
		)
		.pipe(gulp.dest('./public/images'));
}

// 导出默认任务，这样命令行下输入 gulp 即可运行
exports.default = gulp.series(minifyJS, minifyHTML, minifyCSS, minifyIMG);

接下啦，我们命令行下运行 hexo g && gulp 即可打包并压缩我们的文件了。

结合自动化

我在之前的文章使用 github action 发布 hexo中，介绍过使用 github action来发布我们的博客，现在只要在action的基础上加上 gulp任务就 ok 了。这样就达到了，博客项目推送master分支，触发 github action，打包压缩之后，上传至 github pages项目，完美。

- name: Install dependencies
  run: |
    npm i -g hexo-cli gulp
    npm i

- name: Deploy hexo
  run: |
    hexo clean
    hexo g && gulp && hexo deploy