avatar

目录
用Gulp压缩hexo博客

在寻找怎么压缩hexo让网页载入更快时发现了一片新大陆~~

本文转自用Gulp实现Hexo网页压缩优化

Gulp是什么

Hexo生成的静态网页其实是可读性比较好的,会有大量的空格、换行什么的,而实际浏览器解析式完全不需要的。如果把这些空格、换行全部删掉,就会节省很多空间出来,于是网站的响应速度也就变快了。

而Gulp是一种基于node的自动化构建工具,至于自动化构建这个我们目前不需要纠结,我们只要知道它有一些插件可以帮助我们自动化的对hexo生成的各种文件进行压缩。

Gulp怎么用

  • 首先我们要在全局安装下gulp和我们要用到的插件
  • bash
    1
    2
    npm install gulp -g
    npm install gulp gulp-uglify gulp-clean-css gulp-imagemin gulp-htmlmin gulp-htmlclean gulp-concat --save
  • 在hexo的根目录创建一个gulpfile.js文件
  • 先放代码:
    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    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', gulp.series('uglify', 'cssmin', 'fancybox:js', 'fancybox:css', 'jsall','images'));
    gulp.task('default', gulp.series('uglify', 'jsall', 'minify-html'));

    //, 'minify-html', 'cssmin'

    这里要注意的是,默认安装的是gulp 4.0.0,而网上很多例子是基于gulp 3的,所以运行起来 会有如下的报错:

    bash
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    assert.js:351
    throw err;
    ^

    AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (/Users/zhengk/Desktop/hexo/blog/node_modules/_undertaker@1.2.0@undertaker/lib/set-task.js:10:3)
    at Gulp.task (/Users/zhengk/Desktop/hexo/blog/node_modules/_undertaker@1.2.0@undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/Users/zhengk/Desktop/hexo/blog/gulpfile.js:59:6)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)

    这是由于gulp4中需要使用gulp.series 和 gulp.parallel来指定运行的任务。具体见上面gulpfile.js中的最后一行。
    gulp.task('default', gulp.series('uglify', 'jsall', 'minify-html'));

    这一行是写明gulp需要执行的任务,然后需要注意的是,当其中某个任务失败或者没有东西需要压缩的时候,比如你没有用到cssmin却要执行cssmin:js任务,就会有如下的报错:

    bash
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    [23:20:00] Using gulpfile F:\blog\blogsource\gulpfile.js
    [23:20:00] Starting 'default'...
    [23:20:00] Starting 'uglify'...
    [23:20:01] Finished 'uglify' after 60 ms
    [23:20:01] Starting 'cssmin'...
    [23:20:01] 'cssmin' errored after 15 ms
    [23:20:01] Error: File not found with singular glob: F:/blog/blogsource/public/css/main.css (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (F:\blog\blogsource\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (events.js:286:20)
    at Glob.emit (events.js:198:13)
    at Glob.EventEmitter.emit (domain.js:448:20)
    at Glob._finish (F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:197:8)
    at done (F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:182:14)
    at Glob._processSimple2 (F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:688:12)
    at F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:676:10
    at Glob._stat2 (F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:772:12)
    at lstatcb_ (F:\blog\blogsource\node_modules\glob-stream\node_modules\glob\glob.js:764:12)

    只要把对应的任务删掉就好了。

  • 运行gulp
  • 先执行hexo g来生成静态网页,然后我们看下public文件夹下的静态文件大小:

    bash
    1
    2
    $ls -lh
    -rw-r--r-- 1 zhengk staff 57K 12 30 00:07 index.html

    然后我们再执行下gulp(执行时默认执行default任务,所以前面gulpfile.js中设置任务为default)对比下效果:

    bash
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $gulp
    [00:53:29] Working directory changed to ~/Desktop/hexo/blog
    [00:53:30] Using gulpfile ~/Desktop/hexo/blog/gulpfile.js
    [00:53:30] Starting 'default'...
    [00:53:30] Starting 'uglify'...
    [00:53:30] Finished 'uglify' after 23 ms
    [00:53:30] Starting 'cssmin'...
    [00:53:30] Finished 'cssmin' after 216 ms
    [00:53:30] Starting 'jsall'...
    [00:53:30] Finished 'jsall' after 56 ms
    [00:53:30] Starting 'minify-html'...
    [00:53:31] Finished 'minify-html' after 1.16 s
    [00:53:31] Finished 'default' after 1.46 s
    $ls -lh
    -rw-r--r-- 1 zhengk staff 27K 12 30 00:07 hello-world.html

    可以发现足足小了30k,压缩了近一半大小。

    文章作者: 小长弓
    文章链接: http://www.52chang.wang/post/25627.html
    版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 长弓不是弓长
    打赏
    • 微信
      微信
    • 支付宝
      支付宝

    评论