Hexo博客进阶－性能优化

采用Hexo框架搭建了本博客，使用了Indigo主题，基于Node.js和Git，最大的感觉是解析文章很快，网页很简介大方，符合个人博客当初的设想。但是hexo自动生成的html代码中有许多的空白，以前看过其他网站的源码密密麻麻的一大片可以说没有任何空格，当时一点都不知道怎么做到的，后来才知道是采用了Google的技术，而现在自己的博客也可以这么做，那就是用gulp自动化工具压缩，网上看了需要相关文章，本地测试一直有问题，拿来主义让自己太过于懒散，于是今天认认真真的根据自身博客的文件目录情况修改了一下gulpfile.js,非常顺利的压缩了本站。

安装依赖

npm 安装如下工具, 方法皆为 : npm install xxx --save

"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^4.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0",

推荐安装 cnpm,npm服务器在国外，网络影响大，甚至还会遇到需要翻墙才能下载插件的情况，因此推荐安装cnpm。cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm,或者将npm换成淘宝源，这样加载速速会大大提高。。。

创建gulpfile.js

在hexo blog文件夹下创建gulpfile.js:

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    htmlmin = require('gulp-htmlmin'),
    htmlclean = require('gulp-htmlclean');
    concat = require('gulp-concat');
//JS压缩
gulp.task('uglify', function() {
    return gulp.src(['./public/js/**/.js','!./public/js/**/*min.js'])//只是排除min.js文件还是不严谨，一般不会有问题，根据自己博客的修改我的修改为return gulp.src(['./public/**/*.js','!./public/zuoxi/**/*.js',,'!./public/radio/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));//对应修改为./public即可
});
//public-fancybox-js压缩
gulp.task('fancybox:js', function() {
    return gulp.src('./public/vendors/fancybox/source/jquery.fancybox.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public/vendors/fancybox/source/'));
});
// 合并 JS
gulp.task('jsall', function () {
    return gulp.src('./public/**/*.js')
    // 压缩后重命名
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public'));
});
//public-fancybox-css压缩
gulp.task('fancybox:css', function() {
    return gulp.src('./public/vendors/fancybox/source/jquery.fancybox.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./public/vendors/fancybox/source/'));
});
//CSS压缩
gulp.task('cssmin', function() {
    return gulp.src(['./public/css/main.css','!./public/css/*min.css'])   
        .pipe(cssmin())
        .pipe(gulp.dest('./public/css/'));
});
//图片压缩
gulp.task('images', function() {
    gulp.src('./public/uploads/*.*')
        .pipe(imagemin({
            progressive: false
        }))
        .pipe(gulp.dest('./public/uploads/'));
});
// 压缩 public 目录 html文件 public/**/*.hmtl 表示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'))
    });
gulp.task('default', ['uglify', 'jsall', 'cssmin', 'images', 'fancybox:js', 'fancybox:css','minify-html']);

刚开始光想图省事，直接复制网上的方法，然而提示无法压缩javascript，看过资料才知道像带.min.js这样的js无须再压缩，可能再次压缩就会提示错误吧，所以我还是按部就班的根据自己网站目录设置压缩路径。
还是对错误耿耿于怀，对比了一下，逐一排查最终找到根源，提示错误如下：

events.js:167
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
    at createError (/Users/fanchunchun/MyBlog/node_modules/gulp-uglify/lib/create-error.js:6:14)
    at apply (/Users/fanchunchun/MyBlog/node_modules/lodash/_apply.js:16:25)
    at wrapper (/Users/fanchunchun/MyBlog/node_modules/lodash/_createCurry.js:41:12)
    at /Users/fanchunchun/MyBlog/node_modules/gulp-uglify/lib/minify.js:54:15
    at DestroyableTransform._transform (/Users/fanchunchun/MyBlog/node_modules/gulp-uglify/composer.js:10:23)
    at DestroyableTransform.Transform._read (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:334:11)
Emitted 'error' event at:
    at DestroyableTransform.onerror (/Users/fanchunchun/MyBlog/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:558:12)
    at DestroyableTransform.emit (events.js:182:13)
    at onwriteError (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:443:12)
    at onwrite (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:470:11)
    at WritableState.onwrite (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:180:5)
    at DestroyableTransform.afterTransform (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_transform.js:93:3)
    at DestroyableTransform._transform (/Users/fanchunchun/MyBlog/node_modules/gulp-uglify/composer.js:13:9)
    at DestroyableTransform.Transform._read (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/Users/fanchunchun/MyBlog/node_modules/readable-stream/lib/_stream_writable.js:428:64)

原因是一些已经压缩过的js文件再次压缩就提示这个错误，故对gulpfile.js加入已经压缩文件的排除，下面则是显示成功的图片。。。。

执行优化命令

hexo clean
hexo g && gulp
hexo d

连续执行3个命令太麻烦， 可以直接在根目录下的package.json文件中生成写入scripts:

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

然后直接执行如下命令就可以了

npm run build

原先都是hexo clean && hexo generate –deploy来自动更新博文，虽然命令不长，还是不如上面一条简单命令geek,至此，可以得到一个html、css、js、image都更优化的/public文件夹，最后再用各种评测工具测试一下你的博客打开速度吧！~

尝试一下InstantClick 黑科技

非常羡慕大师级JerryQu的博客，打开可以说跟不刷新页面的ajax效果太酷了，由于自身没那个技术，只能用不是特别优雅的黑科技了。InstantClick 的思路非常巧妙，它利用鼠标点击链接前的短暂时间(统计说是平均400ms)进行预加载，从而在感观上实现了迅速打开页面的效果。当你在打开页面的时候，其实页面已经加载到本地了，也就会很快能个完成渲染。
InstantClick 并不能滥用，许多js无法与它兼容，比如 谷歌分析，百度统计，另外还有fancybox 。
初始化，以及解决部分js无法加载的问题:
instantclick.min.js的下载地址：
instantclick.min.js

<script src="/js/instantclick.min.js" data-no-instant></script>
   <script data-no-instant>
   InstantClick.on('change', function(isInitialLoad) {
     if (isInitialLoad === false) {
       if (typeof MathJax !== 'undefined') // support MathJax
         MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
       if (typeof prettyPrint !== 'undefined') // support google code prettify
         prettyPrint();
       if (typeof _hmt !== 'undefined')  // support 百度统计
         _hmt.push(['_trackPageview', location.pathname + location.search]);
       if (typeof ga !== 'undefined')  // support google analytics
           ga('send', 'pageview', location.pathname + location.search);
     }
   });
   InstantClick.init();
   </script>

这时候对于所有链接都开启 预加载模式，但是可以针对部分链接假如黑名单:

<a href="/MyBlog/" data-no-instant>MyBlog</a>

针对自己博客就是修改/themes/indigo/layout/_partials/head.ejs,在这个文件底部加上上面的对instantclick.min.js引入即可，然后把instantclick.min.js文件放到/themes/indigo/source/js/下即可。也许是做了html压缩，同时也做了360的cdn加速，引入instantclick后没有感觉网站快多少。