学了 gulp 想练练手?正好压缩下你的博客

本文最后更新于:2020年9月17日 上午

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

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 也支持流、promisesasync/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

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

 目录