gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，能对网站资源进行优化，也能对开发中重复的任务使用正确的工具自动完成，这里我们用它优化我们 hexo 博客的访问速度。
Gulp-GitHub
Gulp 官方网址
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
|
然后按以下清单文件安装，同样可以把下面的 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 的执行方法，下面放出我的文件内容。
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
89
| gulpfile.js
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 的网页加载速度的分析，写出了现在的这个配置文件。
另外注意修改目录成自己目录。
之后我们添加文章之后，编译发布之间需要多压缩命令：
1
2
3
4
| hexo clean # 删除public文件夹
hexo g # 编译文章，生成public文件夹
gulp # 压缩文件
hexo d # 部署到网站
|
现在，相信你的博客速度已经快起来啦。