Hexo博客使用gulp压缩静态资源

Dear 丶 2021-11-26 16:40 413阅读 0赞

Tips:前导必备

*  [博主博客地址][Link 1]
 *  博主使用的是`yilia`主题

--------------------

### 1、全局安装gulp ###

npm install gulp -g
    # 查看版本
    gulp -v

### 2、安装gulp插件 ###

> 在站点根目录下安装

npm install gulp --save
    npm install gulp-minify-css --save
    npm install gulp-uglify --save
    npm install gulp-htmlmin --save
    npm install gulp-htmlclean --save
    npm install gulp-imagemin --save
    # 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript
    # 解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题
    npm install babel-core@6.26.3 --save
    npm install gulp-babel@7.0.1 --save
    npm install babel-preset-es2015@6.24.1 --save
    # gulp-babel 取消严格模式方法("use strict")
    npm install babel-plugin-transform-remove-strict-mode --save

> 问题：如果安装`gulp-imagemin`错误请执行以下语句  
> `sudo npm i gulp-imagemin --unsafe-perms`

### 3、创建`gulpfile.js`文件 ###

> 在 Hexo 站点下新建`gulpfile.js`文件，文件内容如下：

var gulp = require('gulp');
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');
    var imagemin = require('gulp-imagemin');
    var babel = require('gulp-babel');
    
    // 压缩css文件
    gulp.task('minify-css', function (done) {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss())
            .pipe(gulp.dest('./public'));
        done();
    });
    
    // 压缩html文件
    gulp.task('minify-html', function (done) {
        return gulp.src('./public/**/*.html')
            .pipe(htmlclean())
            .pipe(htmlmin({
                removeComments: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            }))
            .pipe(gulp.dest('./public'));
        done();
    });
    
    // 压缩js文件
    gulp.task('minify-js', function (done) {
        return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
            .pipe(babel({
                //将ES6代码转译为可执行的JS代码
                presets: ['es2015'] // es5检查机制
            }))
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
        done();
    });
    
    // 压缩 public/images 目录内图片(Version<3)
    // gulp.task('minify-images', function () {
    //     gulp.src('./public/images/**/*.*')
    //         .pipe(imagemin({
    //             optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
    //             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
    //             interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
    //             multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
    //         }))
    //         .pipe(gulp.dest('./public/images'));
    // });
    
    // 压缩 public/images 目录内图片(Version>3)
    gulp.task('minify-images', function (done) {
        gulp.src('./public/images/**/*.*')
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 5}),
                imagemin.svgo({
                    plugins: [
                        {removeViewBox: true},
                        {cleanupIDs: false}
                    ]
                })
            ]))
            .pipe(gulp.dest('./public/images'));
        done();
    });
    
    //4.0以前的写法 
    //gulp.task('default', [
    //  'minify-html', 'minify-css', 'minify-js', 'minify-images'
    //]);
    //4.0以后的写法
    // 执行 gulp 命令时执行的任务
    gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
        console.log("----------gulp Finished----------");
        // Do something after a, b, and c are finished.
    });

### 4、创建.babelrc文件 ###

> 在 Hexo 站点下新建.babelrc文件，文件内容如下：

{
        'presets': ['es2015'],
        "plugins": ["transform-remove-strict-mode"]
    }

### 5、静态资源压缩 ###

> 只需要每次在执行 `generate` 命令后执行 `gulp` 就可以实现对静态资源的压缩

hexo g
    gulp

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fzhousiwei.gitee.io%2F

发表评论取消回复

表情：

评论列表（有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

相关 Hexo 个人博客

记录一些比较好的教程，方便以后查看 [https://www.muyiio.com/2020/02/18/1/][https_www.muyiio.com_2020_02_

た入场券/ 2023年05月21日 05:58/ 0 赞/ 47 阅读

相关在github使用hexo搭建静态博客

> 效果：[https://trevor-lan.github.io/][https_trevor-lan.github.io] 安装前提安装 Hexo 之前需要先安

川长思鸟来/ 2023年03月13日 05:47/ 0 赞/ 64 阅读

相关 github page+hexo构建静态博客

首先，完成整套的搭建需要： 1.下载安装git工具[下载地址][Link 1]并添加环境变量 2.下载安装node.js[下载地址][Link 2] 3.gith

桃扇骨/ 2023年01月24日 05:20/ 0 赞/ 204 阅读

相关【hexo】搭建hexo博客

准备工作 github上创建仓库用户名+ github.io 比如我的：`HappyTeemo7569.github.io` 安装环境 git

曾经终败给现在/ 2022年11月25日 10:09/ 0 赞/ 316 阅读

相关使用Hexo写博客

尽管 Hexo 支持 MarkDown，但是我们却不能像写单独的 MarkDown 文档时那样肆无忌惮。由于我们所写的文档是需要被解析为静态网页文件的，所以我们必须严格

偏执的太偏执、/ 2022年09月03日 11:28/ 0 赞/ 245 阅读

相关 Hexo写博客

hexo配置github Git Install hexo-deployer-git. $ npm install hexo-deployer-git --sav

我就是我/ 2022年07月15日 08:45/ 0 赞/ 302 阅读

相关用Hexo制作自己的静态博客

博客是一个老东西了，如果我们想写博客的话，有两种选择，第一种是在博客网站上，例如QQ空间、新浪博客、简书等网站上申请账号，然后编写博客；第二种就是自己找服务器搭一个博客。搭建博

拼搏现实的明天。/ 2022年06月05日 01:16/ 0 赞/ 258 阅读

相关 gulp实现静态资源压缩，打包，上传总结

本文只是对gulp构建工具的一些常用功能的总结。 1.实现文件（css，js，image）压缩 2.实现文件合并 3.版本控制 4.上传七牛cdn

清疚/ 2022年05月21日 13:43/ 0 赞/ 342 阅读

相关搭建静态博客：hexo+github

经过一段时间的折腾，第一个静态博客终于建了起来。相比wordpress的庞大臃肿，博主更喜欢hexo这个轻量级的博客框架。在这里记录下整个搭建过程，希望对大家也能够有所帮助

小灰灰/ 2022年03月10日 05:36/ 0 赞/ 370 阅读

相关 Hexo博客使用gulp压缩静态资源

Tips:前导必备 [博主博客地址][Link 1] 博主使用的是`yilia`主题 -------------------- 1、全局安装gulp

Dear 丶/ 2021年11月26日 16:40/ 0 赞/ 414 阅读