zoukankan      html  css  js  c++  java
  • hexo 博客支持PWA和压缩博文

    目标网站

    https://blog.rmiao.top/

    PWA

    yarn add hexo-offline
    

    然后在root config.yml里新增

    # offline config passed to sw-precache.
    service_worker:
      maximumFileSizeToCacheInBytes: 5242880
      staticFileGlobs:
      - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
      - /lib/**/*.js
      - /lib/**/*.css
      - /images/*
      - /js/src/**/*.js
      stripPrefix: public
      verbose: true
      runtimeCaching:
        - urlPattern: /*
          handler: cacheFirst
          options:
            origin: cdn.bootcss.com
    

    然后添加manifest.json, 比如我使用了 hexo-theme-next的主题,在layout/_custom/header.swig 中引用了manifest.json

    
    <link rel="manifest" href="/manifest.json">
    

    manifest生成地址: https://app-manifest.firebaseapp.com/

    比如,我的为

    {
        "name": "风 - Ryan Miao",
        "short_name": "风",
        "theme_color": "#2196f3",
        "background_color": "#2196f3",
        "display": "browser",
        "scope": "/",
        "start_url": "/"
      }
    

    具体缓存策略还是看下官方文档,这里不求甚解缓存。重启博客,打开控制台,查看网络,会发现,所有的文件都是(from ServiceWorker) 或者(from disk cache)或者(from memory cache)

    当hexo g之后,会多出一个service-worker.js里面则是会缓存的内容。

    压缩

    看了下计算,压缩大概可以节省一半空间。

    $ npm install gulp -g
    $ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
    
    或者使用yarn 
    
    yarn global add gulp
    yarn add gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp
    

    然后,在根目录新增 gulpfile.js :

    
    var gulp = require('gulp');
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');
    // 压缩 public 目录 css
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
    });
    // 压缩 public 目录 html
    gulp.task('minify-html', function() {
      return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
             removeComments: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
    });
    // 压缩 public/js 目录 js
    gulp.task('minify-js', function() {
        return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });
    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'minify-html','minify-css','minify-js'
    ]);
    

    运行:

    hexo clean && hexo g && gulp &&  hexo s
    

    参考

    https://blog.naaln.com/2017/09/hexo-with-pwa/

  • 相关阅读:
    java List转换为字符串并加入分隔符的一些方法总结
    jackson 实体转json 为NULL或者为空不参加序列化
    马云告别演讲
    Linux chmod命令
    Linux执行shell脚本的方法
    2019第36周日
    2019第36周六
    eclipse中的maven插件
    SpringBoot要点之使用Actuator监控
    eclipse隐藏的列编辑
  • 原文地址:https://www.cnblogs.com/woshimrf/p/hexp-pwa-compress.html
Copyright © 2011-2022 走看看