2019-07-05

8 分钟读完 (大约 1145 个字)

使用gulp优化hexo博客，对资源进行压缩

hexo生成出来的资源文件很大，全是没有压缩的，为了节约网络带宽，可以对其public目录下的js，html，css文件进行压缩。那么这里使用的工具就是强大的gulp

使用gulp对打包出的css、js、html及图片文件进行压缩

使用hexo generate指令后，会在根目录下生成网页的资源文件
其目录结构如下

Snipaste_2019-07-06_23-14-23

查看里面的内容，会发现有大量的空白

noncompresstext

查看文件的大小:50kb

noncompress

然后我们再来看看压缩后的文件大小:33kb

compressedfile

内容

compressed

这些多余的空白造成了文件内容冗余，造成了空间浪费，压缩后的文件都快比原来少一半了。

gulp介绍

什么是gulp？

官网介绍:
Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

想要了解更多可以查看
gulp官网

准备工作

没有安装npm的需安装npm
安装gulp工具
- 全局安装
  1
  npm install --global gulp

1
2

- 作为依赖本地安装
1
npm install --save-dev gulp

使用方法

在项目根目录下创建gulpfile.js的文件夹

输入以下代码

var gulp = require('gulp');

gulp.task('default', function() {
// 要执行的任务
});

然后在命令行输入

gulp

就会运行task里面的任务

如果任务名字不是default，如

var gulp = require('gulp')

gulp.task('hello', function() {
    console.log('你好')
})

这时需要在命令行输入

gulp hello

输出

1
2
3

[00:53:12] Using gulpfile D:\SILVER\Documents\GitHub\MyHexoBlog\gulpfile.js
[00:53:12] Starting 'hello'...
你好

简短介绍后，下面进入正题

压缩文件

gulp是通过插件来运作的

首先需要安装插件

npm install gulp-htmlclean // 压缩html
npm install gulp-htmlmin // 压缩html，外加去除注释，压缩css，删除多余属性等
npm install gulp-clean-css // 压缩css
npm install gulp-uglify // 压缩js
npm install gulp-babel // 转换为es2015
npm install gulp-imagemin // 压缩图片

编写
gulpfile.js

let gulp = require('gulp')
let cleanCSS = require('gulp-clean-css')
let htmlmin = require('gulp-htmlmin')
let htmlclean = require('gulp-htmlclean')
let babel = require('gulp-babel') /* 转换为es2015 */
let uglify = require('gulp-uglify')
let imagemin = require('gulp-imagemin')
// 压缩html

// 设置根目录
const root = './public'

// 匹配模式， **/*代表匹配所有目录下的所有文件
const pattern = '**/*'
gulp.task('minify-html', function() {
  return gulp
    // 匹配所有 .html结尾的文件
    .src(`${root}/${pattern}.html`)
    .pipe(htmlclean())
    .pipe(
      htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      })
    )
    .pipe(gulp.dest('./public'))
})

// 压缩css
gulp.task('minify-css', function() {
  return gulp
    // 匹配所有 .css结尾的文件
    .src(`${root}/${pattern}.css`)
    .pipe(
      cleanCSS({
        compatibility: 'ie8'
      })
    )
    .pipe(gulp.dest('./public'))
})

// 压缩js
gulp.task('minify-js', function() {
  return gulp
    // 匹配所有 .js结尾的文件
    .src(`${root}/${pattern}.js`)
    .pipe(
      babel({
        presets: ['env']
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest('./public'))
})

// 压缩图片
gulp.task('minify-images', function() {
  return gulp
    // 匹配public/images目录下的所有文件
    .src(`${root}/images/${pattern}`)
    .pipe(
      imagemin(
        [
          imagemin.gifsicle({ optimizationLevel: 3 }),
          imagemin.jpegtran({ progressive: true }),
          imagemin.optipng({ optimizationLevel: 7 }),
          imagemin.svgo()
        ],
        { verbose: true }
      )
    )
    .pipe(gulp.dest('./public/images'))
})

// 如果使用的是gulp 4.0版本以下，使用下面的代码
// gulp.task('default', [
//     'minify-html','minify-css','minify-js'
// ]);

gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js'))

注意这里使用了gulp 4.0以上的版本

使用下面代码定义指令gulp的任务队列

1 2	// 顺序执行 minify-html -> minify-css -> minify-js gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js'))

然后在命令行输入

gulp
就可以开始压缩了

$ gulp
[01:09:51] Using gulpfile D:\SILVER\Documents\GitHub\MyHexoBlog\gulpfile.js
[01:09:51] Starting 'default'...
[01:09:51] Starting 'minify-html'...
[01:09:52] Finished 'minify-html' after 924 ms
[01:09:52] Starting 'minify-css'...
[01:09:52] Finished 'minify-css' after 65 ms
[01:09:52] Starting 'minify-js'...
[01:09:53] Finished 'minify-js' after 1.16 s
[01:09:53] Finished 'default' after 2.16 s

压缩完成后使用hexo部署

1	hexo deploy

一个命令搞定生成文件，压缩，部署

在package.json文件中的”scripts”下添加

1
2
3

"scripts": {
    "deploy": "hexo clean && hexo g && gulp && hexo d"
}

然后在控制台输入

1	npm run deploy

就会开始自动生成文件->压缩文件->部署到服务器

# css, gulp, html, javascript, 博客优化