blog-web/博客部署调整记录.md at ea0d83d9fa9896cbd061679f3280504bd6016a8a

sookie/blog-web

Fork 0

结发受长生 afc370d284 照片墙滚动加载

2019-05-12 14:38:07 +08:00

11 KiB

Raw Blame History

title

date

hexo的api

根据官网的介绍, 可以按照下面的方式使用hexo的api

const Hexo = require('hexo')
const hexo = new Hexo(process.cwd(), {})
hexo.init().then(()=>{ // 链式的Promise调用, 每一步都要返回Promise对象
  return hexo.call('clean')
}).then(()=>{
  return hexo.call('generate', {watch: false})
}).then(()=>{
  return hexo.exit()
}).catch(err => {
  return hexo.exit(err)
})
/* 当然也可以采用更加简洁的await
try {
  await hexo.init()
  await hexo.call('clean')
  await hexo.call('generate', { watch: false })
  return hexo.exit()
} catch (err) {
  return hexo.exit(err)
}
*/

上面的写法就如同是在命令行执行hexo clean && hexo generate 正好gulp配置任务的时候也需要返回Promise对象( 下面会提到 ), 可以直接结合, 不需要二次封装了, 不错

gulp

之前没用过这个前端构建工具, 因为跟webpack的作用有不少的重合, 前端实在学不完这里使用一下它的任务自动管理的功能, 整体的体验挺好

安装

除了gulp本身, 还有其他几个用的到的插件 ( 当然也可以用npm安装 )

# 这几个是gulp相关的
yarn add gulp gulp-htmlclean gulp-htmlmin gulp-plumber -D
# 这是图片同步到对象仓库相关的
yarn add @xgheaven/nos-node-sdk optimist -D

gulp在4.0这个大版本做了很大的改变, 这里我使用的是4.0.2

gulpfile.js

在根目录下创建gulpfile.js文件, 这个文件是gulp的配置文件先简单规划一下结构

const gulp = require('gulp')

// 创建静态页面 （等同 hexo generate）
gulp.task('generate', () => {
  // TODO 执行hexo的api
})

// 压缩public目录下的html文件
gulp.task('compressHtml', () => {
  // TODO 使用gulp-htmlmin插件压缩html
})

// 同步图片到对象存储仓库
gulp.task('syncImages', () => {
  //TODO 直接调用之前写的同步文件的代码
})

gulp.task('deploy', () => {
  //TODO 递归拷贝public目录中的所有文件到站点根目录
})

// 默认任务
gulp.task('default', 
	gulp.series('generate', 'compressHtml', 'syncImages', 'deploy') // 串行执行任务
)

gulp.task 用于定义一个任务, 第一个参数是任务的名称, 第二个参数是任务要执行的函数从4.0版本开始, 这个函数必须返回Promise对象, 让gulp来监测该任务是否执行完毕应该是有利于更优化串行任务的执行过程
default就是在直接执行gulp的时候会执行的任务当然也可以执行gulp 任务名称用来指定执行某个任务
gulp.series用来定义串行的任务, 也就是把参数里面这几个任务作为子任务, 并按照串行的方式执行如果不使用它, 而是直接写

gulp.task('default', ['generate', 'compressHtml', 'syncImages', 'deploy'])

任务这几个子任务就会以并行的方式执行, 但是在这里因为有执行的顺序要求比如必须在generate完成之后再执行html的压缩, 所以选择串行方式这个api也是gulp4.0新增的以往只能定义任务的完成依赖, 比如在定义B任务必须在A任务完成后执行

gulp.task('B', ['A'], ()=>{/* do something */})

添加一些细节

// gulpfile.js

const gulp = require('gulp'),
  htmlmin = require('gulp-htmlmin'),   //html压缩组件
  htmlclean = require('gulp-htmlclean'), //html清理组件
  plumber = require('gulp-plumber'),  //容错组件（发生错误不跳出任务，并报出错误内容）
  Hexo = require('hexo')

// 程序执行的传参
const argv = require('optimist')
  .demand(['accessKey', 'accessSecret', 'deployPath'])
  .describe('accessKey', '网易云对象存储key')
  .describe('accessSecret', '网易云对象存储secret')
  .describe('deployPath', '静态化后发布的目录')
  .argv

const hexo = new Hexo(process.cwd(), {})

// 创建静态页面 （等同 hexo generate）
gulp.task('generate', async function() {
  try {
    await hexo.init()
    await hexo.call('clean')
    await hexo.call('generate', { watch: false })
    return hexo.exit()
  } catch (err) {
    return hexo.exit(err)
  }
})

// 压缩public目录下的html文件
gulp.task('compressHtml', () => {
  const cleanOptions = {
    protect: /<\!--%fooTemplate\b.*?%-->/g,             //忽略处理
    unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/ig //特殊处理
  }
  const minOption = {
    collapseWhitespace: true,           //压缩HTML
    collapseBooleanAttributes: true,    //省略布尔属性的值  <input checked="true"/> ==> <input />
    removeEmptyAttributes: true,        //删除所有空属性    <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,   //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
    removeComments: true,               //清除HTML注释
    minifyJS: true,                     //压缩页面JS
    minifyCSS: true,                    //压缩页面CSS
    minifyURLs: true                    //替换页面URL
  }
  return gulp.src('./public/**/*.html')
    .pipe(plumber())
    .pipe(htmlclean(cleanOptions))
    .pipe(htmlmin(minOption))
    .pipe(gulp.dest('./public'))
})

// 同步图片到对象存储仓库
gulp.task('syncImages', () => {
  const listImages = require('./deploy_utils/list_images')
  // 当前本地存在的所有图片
  const imagesList = listImages(`${process.cwd()}/source/`, 'images/')
  const ImageSynchronizer = require('./deploy_utils/image_synchronize')
  const nosSetting = {
    defaultBucket: 'blog-cdn',
    endpoint: 'http://nos-eastchina1.126.net',
    accessKey: argv.accessKey,
    accessSecret: argv.accessSecret
  }
  const imageSynchronizer = new ImageSynchronizer(nosSetting, imagesList, `${process.cwd()}/source/`)
  return imageSynchronizer.synchronize('images/')
})

gulp.task('deploy', () => {
  const deploy = require('./deploy_utils/deploy')
  return deploy.exec('./public', argv.deployPath, false)
})

// 默认任务
gulp.task('default', 
	gulp.series('generate', 'compressHtml', 'syncImages', 'deploy') // 串行执行任务
)

syncImages里面相关的东西可以看这篇博客图片迁移记大体上都一致, 之后又简单封装了一下, 这都不重要
accessKey, accessSecret, deployPath这三个参数分别在运行时传入前两个是网易云对象存储的访问token, deployPath用来指定页面发布的目录, 在deploy当中拷贝到该位置
deploy里面写了递归删除目录与递归拷贝目录的函数

// deploy.js

const fs = require('fs')
const path = require('path')

module.exports = {
  /**
   * 发布静态化的站点
   * @param {String} source 源位置
   * @param {String} target 目标位置
   * @param {Boolean} copyRoot 是否拷贝根目录
   */
  async exec(source, target, copyRoot) {
    await new Promise((resolve, reject) => {
      console.log(`删除${target}目录中的文件`)
      this._deleteFolderRecursive(target, true)
      resolve()
    })
    console.log(`拷贝${source}所有文件 -> ${target}`)
    this._copyFolderRecursive(source, target, copyRoot)
  },

  /**
   * 递归删除目录以及子目录中的所有文件
   * @param {String} curPath 要递归删除的目录
   * @param {Boolean} retainRoot 是否保留根目录不删除
   */
  _deleteFolderRecursive(curPath, retainRoot) {
    fs.readdirSync(curPath).forEach(file => {
      var nextPath = path.resolve(curPath, file)
      if(fs.statSync(nextPath).isDirectory()) { // recurse
        this._deleteFolderRecursive(nextPath)
      } else {
        fs.unlinkSync(nextPath)
      }
    })
    if(!retainRoot) { // 根目录保留
      fs.rmdirSync(curPath)
    }
  },
  /**
   * 递归拷贝目录
   * @param {String} source 源位置
   * @param {String} target 目标位置
   */
  _copyFolderRecursive(source, target) {
    let files = fs.readdirSync(source); //同步读取当前目录
    files.forEach(file => {
      var _src = path.resolve(source, file)
      var _target = path.resolve(target, file)
      fs.stat(_src,(err,stats) => {  //stats  该对象 包含文件属性
        if (err) throw err
        if (stats.isFile()) { //如果是个文件则拷贝 
          let readable = fs.createReadStream(_src) //创建读取流
          let writable = fs.createWriteStream(_target) //创建写入流
          readable.pipe(writable);
        } else if (stats.isDirectory()) { //是目录则 递归 
          this._checkDirectory(_src, _target, this._copyFolderRecursive)
        }
      })
    })
  },
  
  /**
   * 校验目标目录是否存在
   * @param {String} src 源目录
   * @param {String} target 目标目录
   * @param {Function} callback 回调函数
   */
  _checkDirectory (src,target,callback) {
    fs.access(target, fs.constants.F_OK, err => {
      if (err) {
        fs.mkdirSync(target)
      }
      callback.call(this, src, target)
    })
  }
}

持续集成

在package.json的scripts里面添加 "build": "gulp" 之后, 就可以配置持续集成的脚本了现在只需要一行了

npm run build -- --accessKey xxx --accessSecret xxx --deployPath /path/to/deploy

jenkins输出日志

11 KiB Raw Blame History Unescape Escape