如何使用gulp压缩博客的html、css、image、js

安装gulp依赖

首先安装gulp，执行以下命令：

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. 执行命令

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

2. 安装所需要我们压缩文件所需要的文件

   cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify-es gulp-imagemin --save-dev
   

3. 在我们的博客目录下建一个名为：gulpfile.js，如图：

4. 复制以下代码到gulpfile.js中

   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()));
   

5. 先生成博客文章，使用以下命令生成：

   hexo g
   

6. 在cmd中运行gulp进行压缩：

   gulp
   

7. 输出的结果，如图：

最后

部署到服务器即可

---

设置npm代理（可选）

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

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会不会成功呢？

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

npm uninstall gulp-imagemin

改下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连接设置中的局域网设置查看

• 设置npm代理

  npm config set proxy=http://127.0.0.1:14567
  

• 安装 gulp-imagemin

  npm i --save-dev gulp-imagemin	
  

• 安装完成后取消npm代理，因为不取消的话，就必须一直开着代理

  npm config set proxy=null