如何使用gulp压缩博客文件

安装gulp依赖

首先安装gulp,执行以下命令:

1
npm install gulp -g

安装完之后,怎么实现压缩我们的博客资源呢?

需要安装五个模块

  • gulp-htmlclean //清理html

  • gulp-htmlmin //压缩html

  • gulp-minify-css //压缩css

  • gulp-uglify-es //压缩js, -es 代表可以处理es6语法

  • gulp-imagemin //压缩图片

注意

因为 gulp-imagemin 被墙,无法下载,需要使用 cnpm 或者 代理 进行下载 (这是一个大坑)。

本文是通过cnpm进行安装的,不过也有如何给npm设置代理进行安装的说明,任选其一即可。

安装cnpm

  1. 执行命令

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 安装所需要我们压缩文件所需要的文件

    1
    cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify-es gulp-imagemin --save-dev
  1. 在我们的博客目录下建一个名为:gulpfile.js,如图:

    gulpfile.js

  2. 复制以下代码到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
    var gulp = require('gulp');
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify-es').default;
    var htmlmin = require('gulp-htmlmin');

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


    gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./public'));
    });

    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-js', function() {
    return gulp.src('./public/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
    });

    gulp.task('images', function () {
    return gulp.src('./public/**/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('./public'));

    });

    // 执行 gulp 命令时执行的任务
    gulp.task('default',gulp.series('minify-html', 'minify-css','minify-js','images', done => done()));
  3. 先生成博客文章,使用以下命令生成:

    1
    hexo g
  4. 在cmd中运行gulp进行压缩:

    1
    gulp
  5. 输出的结果,如图:

最后

部署到服务器即可


设置npm代理(可选)

首先看没有使用代理下载的情况

1
npm i --save-dev gulp-imagemin

经过漫长的等待后,出现的结果:

gifsicle@5.1.0 postinstall F:\privateWork\blog\node_modules\gifsicle
node lib/install.js

‼ getaddrinfo ENOENT raw.githubusercontent.com
‼ gifsicle pre-build test failed
i compiling from source
× Error: Command failed: C:\Windows\system32\cmd.exe /s /c “autoreconf -ivf”
‘autoreconf’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

……

从 getaddrinfo ENOENT raw.githubusercontent.com 来看是获取不到这个域名的IP地址,属于DNS污染。于是有人就想我改一下DNS服务器地址,改成谷歌的8.8.8.8会不会成功呢?

让我们再来一下,首先移除这个安装失败的包

1
npm uninstall gulp-imagemin

改下DNS服务器

dns

再运行下安装gulp-imagemin,出现的结果是

gifsicle@5.1.0 postinstall F:\privateWork\blog\node_modules\gifsicle

node lib/install.js

‼ read ECONNRESET
‼ gifsicle pre-build test failed
i compiling from source
× Error: Command failed: C:\Windows\system32\cmd.exe /s /c “autoreconf -ivf”

……

read ECONNRESET,说明连接不上服务器,只能采用代理方式连接服务器

使用代理后,首先准备的:

  • 本地代理地址,通过IE连接设置中的局域网设置查看

    proxy

  • 设置npm代理

    1
    npm config set proxy=http://127.0.0.1:14567
  • 安装 gulp-imagemin

    1
    npm i --save-dev gulp-imagemin
  • 安装完成后取消npm代理,因为不取消的话,就必须一直开着代理

    1
    npm config set proxy=null

评论