本文介紹hexo使用grunt實現(xiàn)一些自動化操作俩功。

開發(fā)過前端或者node.js的同學對grunt應該不陌生幻枉，如果對grunt不熟悉可略過本文。

開始使用hexo來處理靜態(tài)博客時我就遇到了問題诡蜓，我的文章已經(jīng)寫了很多篇了熬甫，都是markdown格式，而且托管在github上了蔓罚，然而hexo并不支持導入文章椿肩。

好在我發(fā)現(xiàn)只要把markdown文件拷貝到hexo里的source/_posts，hexo就會解析豺谈，我可以考慮直接把所有文章直接拷貝到這個目錄郑象。

但是另外一個問題又出現(xiàn)了，問題在于存在兩份一模一樣的源文件核无，一份我托管在github上扣唱，一份在source/_posts，后期文章改動的話团南，兩邊不同步噪沙，維護很費力。

后來想到的方法就是利用自動化工具來處理源文件的拷貝吐根，博客的部署等一些操作正歼。由于對grunt比較熟悉，所以使用了grunt拷橘。

如果對grunt不熟悉局义，可以前往grunt 網(wǎng)站

準備

• 切換到hexo博客目錄
• 執(zhí)行以下命令安裝grunt cli： npm install -g grunt-cli
• 執(zhí)行以下命令安裝grunt： npm install grunt --save-dev
• 執(zhí)行以下命令安裝插件：npm install --save-dev grunt-bg-shell grunt-contrib-clean grunt-contrib-copy grunt-contrib-watch grunt-rewrite grunt-zip grunt-shell load-grunt-tasks
• 新建Gruntfile.js
• 新建raw目錄

完成后，我的hexo博客里的目錄結(jié)構(gòu)是這樣子的：

image

grunt插件說明

以下為使用到的插件：

Gruntfile.js 編寫

新建Gruntfile.js萄唇，以下是我的Gruntfile.js的內(nèi)容：

// see: https://gruntjs.com/sample-gruntfile
module.exports = function(grunt) {
  
  var config = {
    pkg: grunt.file.readJSON('package.json'),
    pathConfig: {
      raw: 'raw',
      posts: 'source/_posts',
    },

    clean: {
      posts: {
        src: ['<%= pathConfig.posts %>/'],
      },
    },

    copy: {
      main: {
        files: [{
          expand: true,
          cwd: '<%= pathConfig.raw %>',
          src: '**/*.md',
          dest: '<%= pathConfig.posts %>',
          flatten: true,
          filter: function(filepath) {
            // var patterns = ['---\ntitle:'];
            var patterns = ['^---$'];
            var matchRegex = function(filepath, patterns) {
              var content = grunt.file.read(filepath);

              return patterns.some(function(pattern){
                var regex = new RegExp(pattern, 'm');
                // var regex = new RegExp(pattern);
                return regex.test(content);
              });
            };
            return matchRegex(filepath, patterns);
          },
        }],
      },
    },

    watch: {
      raw: {
        files: ['<%= pathConfig.raw %>/**/*.md'],
        tasks: ['copy:main'],
        options: {
          // spawn: false,
        },
      },
    },

    bgShell: {
      hexoServer: {
        cmd: 'hexo server',
        bg: true,
      },
      
    },

    shell: {
      gitClone: {
        command: 'git clone git@github.com:xxxxxxx/my_blog.git <%= pathConfig.raw %>/my_blog'
      },
      gitPullRaw: {
        command: 'cd ./raw/my_blog && git pull'
      },

      hexoGenerate: {
        command: 'hexo g',
      },
      hexoClean: {
        command: 'hexo clean',
      },
    },

    rewrite: {
      abbrlink: {
        src: '<%= pathConfig.raw %>/**/*.md',
        editor: function(contents, filepath){
          const crypto = require('crypto');
          const hash = crypto.createHash('sha256');

          hash.update(contents);
          var hashValue = hash.digest('hex');

          return contents.replace(/abbrlink: 3fb9c7a4f247726d/g, "abbrlink: " + hashValue.substring(0, 16));
        }
      },
    },

    zip: {
      dist: {
        src: [
          'public/**/*',
        ],
        dest: 'blog.zip'
      }
    }

  };

  grunt.initConfig(config);
  require('load-grunt-tasks')(grunt);

  // 運行g(shù)runt init 調(diào)用此任務(wù)
  grunt.registerTask('init', [
    'shell:gitClone'
  ]);

  grunt.registerTask('RawToPosts', [
    'shell:gitPullRaw',
    'rewrite:abbrlink',
    'copy:main',
  ]);

  // 運行 grunt 或者 grunt default 調(diào)用此任務(wù)
  grunt.registerTask('default', [
    'clean:posts',
    'RawToPosts',
    'bgShell:hexoServer',
    'watch',
  ]);

  // 運行g(shù)runt build調(diào)用此任務(wù)
  grunt.registerTask('build', [
    'clean:posts',
    'RawToPosts',
    'shell:hexoClean',
    'shell:hexoGenerate',
    'zip:dist'
  ]);

};

上述Gruntfile.js中有三個比較重要的任務(wù)：

• grunt init
• grunt
• grunt build

grunt init 任務(wù)是調(diào)用shell:gitClone 把我的博客源文件從github上拉取下來，放到raw/my_blog目錄术幔，這個命令只需要執(zhí)行一次另萤，后期不再需要。

grunt 任務(wù)用于日常本地寫博客诅挑，它的子任務(wù)分別是：

• clean:posts: 刪除source/_posts下的所有文件
• RawToPosts: 從github拉取更新到raw/my_blog四敞，并拷貝符合條件的文件到source/_posts
• bgShell:hexoServer: 執(zhí)行hexo server，啟動hexo本地服務(wù)
• watch: 監(jiān)測文件變化拔妥，輔助hexo server刷新

grunt build 任務(wù)用于發(fā)布博客忿危，它的子任務(wù)分別是：

• clean:posts: 刪除source/_posts下的所有文件
• RawToPosts: 從github拉取更新到raw/my_blog，并拷貝符合條件的文件到source/_posts
• shell:hexoClean: 執(zhí)行hexo clean
• shell:hexoGenerate: 執(zhí)行hexo genetate
• zip:dist: 打包public成為blog.zip

通過上述grunt自動化腳本没龙，我保持了博客文件與hexo博客環(huán)境相分離的目標铺厨，我只需要運行grunt build缎玫，grunt會自動幫我拉取最新的博客文件并最終生成hexo目標文件。

這樣做的好處是以后不使用hexo時努释，我可以很方便轉(zhuǎn)移我的博客碘梢。

其他

如果是使用github pages來托管博客的同學，可以把grunt build的zip:dist換成自動部署博客的任務(wù)伐蒂，就能一鍵部署啦煞躬。

• 更多內(nèi)容:hexo博客搭建匯總