无名之辈的自留地

0%

使用 Gulp 优化 Hexo

发表于 分类于 ， Valine： 本文字数： 3.2k 阅读时长 ≈ 3 分钟

Gulp

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，能对网站资源进行优化，也能对开发中重复的任务使用正确的工具自动完成，这里我们用它优化我们hexo博客的访问速度。

Gulp-GitHub
Gulp官方网址
Gulp中文官方网址

安装 node.js

这个相信开启Hexo博客的都已经安装了

安装 gulp

由于npm的服务器在国外，为了加快安装速度大家可以用淘宝NPM镜像地址下载，首先安装cnpm如下：

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm代替npm速度就可以快一些啦~

1
2
npm install -g gulp
#cnpm install -g gulp

安装 gulp 插件

然后按以下清单文件安装,同样可以把下面的npm改为cnpm。

1
2
3
4
5
6
7
npm install gulp --save
npm install gulp-htmlclean --save
npm install gulp-htmlmin --save
npm install gulp-imagemin --save
npm install gulp-clean-css --save
npm install gulp-uglify --save
npm install gulp-concat --save

其中gulp是工程的核心程序，Gulp采用插件方式进行工作，下面的5个文件就是基于Gulp的插件.Gulp插件列表。
这里可以看到gulp-imagemin的详细介绍。

新建gulpfile.js文件

在网站的目录下面新建文件gulpfile.js 内容是gulp的执行方法，下面放出我的文件内容。

gulpfile.js
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
var gulp = require('gulp');

//模块获取
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin')
var concat = require('gulp-concat');

// 压缩 public 目录 css文件
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(cleancss({compatibility: 'ie8'}))
            .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'))
    });

    // 压缩图片
    gulp.task('minify-images', function () {
        gulp.src('./public/images/*.*')
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest('./public/images/'))
    });

    gulp.task('minify-image', function () {
        gulp.src('./public/image/*.*')
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest('./public/image/'))
    });

    gulp.task('minify-images-avatar', function () {
        gulp.src('./public/uploads/*.*')
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest('./public/uploads/'))
    });

    // 压缩 public/js 目录 js文件
    gulp.task('minify-js', function() {
        return gulp.src('./public/js/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public/js'));
    });

    //public/lib/fancybox-js压缩
    gulp.task('minify-fancyboxjs', function() {
        return gulp.src('./public/lib/fancybox/source/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public/lib/fancybox/source/'));
    });

    //public/lib/jquery_lazyload-js压缩
    gulp.task('minify-jquerylazyloadjs', function() {
        return gulp.src('./public/lib/jquery_lazyload/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public/lib/jquery_lazyload/'));
    });

    //合并 JS
    gulp.task('jsall', function () {
        return gulp.src('./public/**/*.js')
        //压缩后重命名
            .pipe(concat('app.js'))
            .pipe(gulp.dest('./public'));
    });

    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'minify-html','minify-css','minify-images','minify-image','minify-images-avatar','minify-js','minify-fancyboxjs','minify-jquerylazyloadjs','jsall'
    ]);

本来是直接复制网上的配置的，结果运行下出现了以下错误：

1
2
events.js:160
      throw er; // Unhandled 'error' event

结合网上的回答得知是因为像.min.js这类后缀的js无须再次压缩，而像我这种水水的人只好一下一下根据网站目录设置压缩路径，并且结合了下结合google的网页加载速度的分析，写出了现在的这个配置文件。
另外注意修改目录成自己目录。

运行gulp

之后我们添加文章之后，编译发布之间需要多压缩命令：

1
2
3
4
hexo clean  # 删除public文件夹
hexo g      # 编译文章，生成public文件夹
gulp        # 压缩文件
hexo d      # 部署到网站

现在，相信你的博客速度有了显著的提高。