TniAsu
TniAsu
文章10
标签16
分类2
Gulp in Hexo

Gulp in Hexo

使用 Gulp 来压缩你的 Hexo 静态资源

幸福值,对一个网站来说,应该是客户端的体验吧,不外乎网站访问速度是否流畅,内容是否有益且舒适……
而使用 Gulp 来压缩静态资源,兴许能增加这个幸福值,至少我是这么认为的!

先上方案

  1. 在你的博客根目录下安装相关插件/包。

    $ npm install --global gulp-cli #全局安装 gulp-cli 命令行工具模块
    $ npm install gulp --save #本地安装 gulp 插件
    $ npm install gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin --save #安装 gulp 不同功能插件
    $ npm install gulp-babel babel-preset-env babel-preset-mobx --save #安装编译压缩所需babel 插件
    $ npm install -D @babel/core @babel/preset-react @babel/preset-env --save # 安装 babel 包
  1. 安装完成后需要检查 package.json,到 2020.4.30 之时,生成的 package.json 应该至少包含如下内容,,否则复制并执行 npm install

      "dependencies": {
        "babel-preset-env": "^1.7.0",
        "babel-preset-mobx": "^2.0.0",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^4.2.0",
        "gulp-htmlclean": "^2.7.22",
        "gulp-htmlmin": "^5.0.1",
        "gulp-imagemin": "^7.1.0",
        "gulp-uglify": "^3.0.2",
      },
      "devDependencies": {
        "@babel/cli": "^7.8.4",
        "@babel/core": "^7.9.0",
        "@babel/preset-env": "^7.9.5",
        "@babel/preset-react": "^7.9.4",
        "babel-eslint": "^8.2.6",
        "eslint": "^4.19.1"
      }
  1. 在博客根目录创建 gulpfile.js 并将以下内容复制粘贴到 gulofile.js 中

    let gulp = require('gulp')
    let cleanCSS = require('gulp-clean-css')
    let htmlmin = require('gulp-htmlmin')
    let htmlclean = require('gulp-htmlclean')
    let babel = require('gulp-babel') /* 转换为es2015 */
    let uglify = require('gulp-uglify')
    let imagemin = require('gulp-imagemin')
    
    // 设置根目录
    const root = './public'
    
    // 匹配模式, **/*代表匹配所有目录下的所有文件
    const pattern = '**/*'
    
    // 压缩html
    gulp.task('minify-html', function() {
      return gulp
        // 匹配所有 .html结尾的文件
        .src(`${root}/${pattern}.html`)
        .pipe(htmlclean())
        .pipe(
          htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
          })
        )
        .pipe(gulp.dest('./public'))
    })
    
    // 压缩css
    gulp.task('minify-css', function() {
      return gulp
        // 匹配所有 .css结尾的文件
        .src(`${root}/${pattern}.css`)
        .pipe(
          cleanCSS({
            compatibility: 'ie8'
          })
        )
        .pipe(gulp.dest('./public'))
    })
    
    // 压缩js
    gulp.task('minify-js', function() {
      return gulp
        // 匹配所有 .js结尾的文件
        .src(`${root}/${pattern}.js`)
        .pipe(
          babel({
            presets: ['@babel/preset-env']
          })
        )
        .pipe(uglify())
        .pipe(gulp.dest('./public'))
    })
    
    // 压缩图片
    gulp.task('minify-images', function() {
      return gulp
        // 匹配public/images目录下的所有文件
        .src(`${root}/images/${pattern}`)
        .pipe(
          imagemin(
            [
              imagemin.gifsicle({ optimizationLevel: 3 }),
              imagemin.jpegtran({ progressive: true }),
              imagemin.optipng({ optimizationLevel: 7 }),
              imagemin.svgo()
            ],
            { verbose: true }
          )
        )
        .pipe(gulp.dest('./public/images'))
    })
    
    gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js'))

End :完成之后可使用 hexo g 生成静态文件并执行 gulp 检查是否能够运行。

无误之后,可以在生成静态文件之后使用 gulp 来压缩静态资源。

   $ hexo cl && hexo g && gulp

也可以通过写脚本来精简命令

在博客根目录下的 package.json 中修改

   "scripts": {
     "build": "hexo clean && hexo g && gulp",
     "deploy": "hexo clean && hexo g && gulp && hexo d"
   }

构建只需要执行 npm run build ,构建发布只需要执行 npm run deploy

再说故事

很早就使用过 gulp 来压缩静态资源, 最近一次重装系统,之后 gulp 就不能再使用了,于是我又再网上搜起了教程,网上清一色的都是远古教程,没有最近更新能用的,就来一周之内的能用的也没有找到一个,坚信着只要不放弃,就一定能解决问题的信念,我在网上找到了许多教程

终于有一个,能运行,虽然不能顺利压缩 js 资源,但是 css 和 html 都可以正常压缩,我现在提供的这份 gulpfile.js 也是参照那位大佬所写的,而我唯一跟他不同的也只有第 52 行代码。

presets: ['env'] #这是那位大佬的
presets: ['@babel/preset-env'] #这是我的

确实相差不大,不过也正是这一点不同才导致了一些 javascript 资源无法正常压缩
如果照着那位大佬写的话,会报以下错误

[16:29:18] TypeError in plugin "gulp-babel"
Message:
    /home/tniasu/documents/blog/public/js/app.js: Cannot read property 'bindings' of null
[16:29:18] 'default' errored after 1.72 s

搜索可知道这是因为压缩 javascript 文件需要 babel 编译打包的参与,而安装的 webpack版本没有与 babel 版本对应(所以说此类文章具有时效性?!),否则即使配置项 exclude 配置了node_modules也可能会报错。(没学过 javascript 可能是?)
修改参数即可