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

761 阅读3分钟

一些关于 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({
    removeCommentstrue,
    minifyJStrue,
    minifyCSStrue,
    minifyURLstrue,
   }),
  )
  .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({ optimizationLevel3 }),
     imagemin.mozjpeg({ progressivetrue }),
     imagemin.optipng({ optimizationLevel7 }),
     imagemin.svgo(),
    ],
    { verbosetrue },
   ),
  )
  .pipe(gulp.dest('./public/images'));
}

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

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

结合自动化

我在之前的文章post_link 使用-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 -d