如何使用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,如图:

在这里插入图片描述

  1. 复制以下代码到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()));
    
  2. 先生成博客文章,使用以下命令生成:

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

    gulp
    
  4. 输出的结果,如图:

在这里插入图片描述

最后

部署到服务器即可


设置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
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值