Hunter的博客

使用gulp来压缩hexo中的静态资源文件

标题取的有点模糊不清,主要是想说下如何通过gulp来压缩hexo生成的html、js、css、png内容

前言

gulp:基于nodejs流的自动化构建工具
关于gulp的介绍与安装请自行参考官网描述,本章不做阐述

步骤

Step1:hexo根目录新增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
var gulp = require('gulp');
//html压缩
var htmlmin = require('gulp-htmlmin');
//js压缩
var jsmin = require('gulp-jsmin');
//文件重命名
var rename = require('gulp-rename');
//图片压缩png/jpg/gif
var imagemin = require('gulp-imagemin');
//png压缩
var pngquant = require('imagemin-pngquant');
//css压缩
var csso = require('gulp-csso');
var root = "./public";
var buildDir = root;
var datas={
html:[root+"/**/*.html"],
image:[root+"/**/*.png"],
css:[root+"/**/*.css"],
js:[root+"/**/*.js",'!*min.js']
}
// 压缩html
gulp.task("htmlmin",function(){
gulp.src(datas.html)
.pipe(htmlmin({collapseWhitespace:true,minifyJS:true,minifyCSS:true,removeComments:true}))
.pipe(gulp.dest(buildDir));
});
// png图片压缩
gulp.task("imagemin",function(){
gulp.src(datas.image)
.pipe(imagemin({
progressive:true,
svgoPlugins:[{removeViewBox:false}],
use:[pngquant()] //压缩率64%
}))
.pipe(gulp.dest(buildDir));
});
// js压缩
gulp.task("jsmin",function(){
gulp.src(datas.js)
.pipe(jsmin())
//.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(buildDir));
});
// css压缩
gulp.task("cssmin",function(){
gulp.src(datas.css)
.pipe(csso())
.pipe(gulp.dest(buildDir));
});
gulp.task("default",["htmlmin","imagemin","jsmin","cssmin"]);

Step2:执行命令

1
2
3
4
hexo clean
hexo ge
gulp
hexo d

最后

gulp提供了相当多的插件,大家可以自行去了解使用,还是挺好使的

参考

gulp官网
gulp中文