利用gulp优化web页面加载速度（代码教程）

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

压缩html

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

npm install --save-dev gulp-htmlmin

使用方法如下：

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，安装方法如下：

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

使用方法如下：

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文件的压缩。首先，我们来安装它：

npm install --save-dev gulp-uglify

使用方法如下：

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插件可以帮我们做到这一点。首先，我们来安装它：

npm install --save-dev gulp-imagemin

经典的用法如下：

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

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

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

…
.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，有一篇文章介绍了交错扫描和逐行扫描，请大家参考！