利用gulp优化web页面加载速度

利用gulp优化web页面加载速度

利用hexo搭建好博客之后,发现博客页面加载速度特别慢,这一点在手机端比较明显。关闭了粒子动画效果后,页面加载的速度没有得到明显改善,于是想从其他方面来提升加载速度。而压缩代码则是一个最直接的方式。

压缩html

gulp-htmlmin是一个用于压缩html文件的插件,安装方法如下:

1
npm install --save-dev gulp-htmlmin

使用方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');

gulp.task('minifyHtml', function() {
var minifyOptions = {
collapseWhitespace: true, // 折叠html节点间的空白
minifyCSS: true, // 压缩css
minifyJS: true, // 压缩js
removeComments: true, // 去除注释
removeEmptyAttributes: true, // 去除空属性
removeRedundantAttributes: true // 去除与默认属性一致的属性值
};
return gulp.src('src/*.html')
.pipe(htmlmin(minifyOptions))
.pipe(gulp.dest('dist'));
});

这个插件还有很多的配置项,请参考Options Quick Reference

ps:html文件中可以嵌入js以及css内容,因此该插件支持对html文件中js及css内容的压缩。

压缩css

我之前用过一个gulp-minify-css插件来压缩css文件,不过最近发现它已经被废弃了,取而代之的是gulp-clean-css,安装方法如下:

1
npm install gulp-clean-css --save-dev

使用方法如下:

1
2
3
4
5
6
7
8
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('minifyCss', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});

gulp-clean-css的配置项挺多的,感觉还是要遇到具体问题,具体分析了。配置项参考clean-CSS

压缩js

我们可以用gulp-uglify插件来进行js文件的压缩。首先,我们来安装它:

1
npm install --save-dev gulp-uglify

使用方法如下:

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');

gulp.task('compress', function (cb) {
pump([
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
], cb);
});

这里用到了一个pump插件,其实不需要它也是完全可以正常压缩js文件的。但是pump插件为我们提供了一个排错的能力,能够打印出压缩js文件过程的具体错误信息,让我们快速定位修改。
ps:gulp-uglify支持一些配置项,请参考Minify options

压缩图片资源

压缩图片资源也是优化web页面的一个重要方法,而gulp-imagemin插件可以帮我们做到这一点。首先,我们来安装它:

1
npm install --save-dev gulp-imagemin

经典的用法如下:

1
2
3
4
5
6
7
8
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);

imagemin()也可以传入配置参数,主要的一些配置项如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13

.pipe(imagemin([
imagemin.gifsicle({interlaced: true}), //优化gif
imagemin.jpegtran({progressive: true}), //优化jpg,jpeg
imagemin.optipng({optimizationLevel: 5}), //优化png
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
}) //优化svg
]))

这里有两个单词需要注意一下,interlaced和progressive,有一篇文章介绍了交错扫描和逐行扫描,请大家参考!

我在利用上述插件来压缩博客public文件夹下的资源时,发现在进行html压缩和css压缩时,出现了一些页面bug,暂未得出原因,留待后续观察,于是暂时放弃了html和css插件压缩,仅使用了gulp-uglify和gulp-imagemin来压缩js文件和图片。经优化后,博客加载速度得到了显著提升,也算是做了一个不错的优化。


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

# gulp

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×