gulp优化hexo方法

拼搏现实的明天。 2021-12-16 17:49 207阅读 0赞

gulp通过对站点使用的静态资源进行压缩，来优化网站的访问速度。

首先安装gulp以及所需要的模块：

npm install gulp -g

npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

然后在博客的根目录下创建**`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');
    
    // 压缩html
    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'))
    });
    // 压缩css
    gulp.task('minify-css', function() {
        return gulp.src('./public/**/*.css')
            .pipe(minifycss({
                compatibility: 'ie8'
            }))
            .pipe(gulp.dest('./public'));
    });
    // 压缩js
    gulp.task('minify-js', function() {
        return gulp.src('./public/js/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });
    // 压缩图片
    gulp.task('minify-images', function() {
        return gulp.src('./public/images/**/*.*')
            .pipe(imagemin(
            [imagemin.gifsicle({
         'optimizationLevel': 3}),
            imagemin.jpegtran({
         'progressive': true}),
            imagemin.optipng({
         'optimizationLevel': 7}),
            imagemin.svgo()],
            {
         'verbose': true}))
            .pipe(gulp.dest('./public/images'))
    });
    // 默认任务
    gulp.task('default', gulp.parallel(
        'minify-html','minify-css','minify-js','minify-images'
    ));

最后执行命令，上传GitHub

hexo clean&&hexo g&&gulp&&hexo d

转载于:https://www.cnblogs.com/Mayfly-nymph/p/10623234.html

发表评论取消回复

表情：

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

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

相关阅读

相关 gulp

gulp是基于node的自动化构建工具 gulp能干啥？1.压缩JS、css文件2.合并文件3.自动编译SASS4.自动压缩图片5.保存时自动刷新浏览器 npm

r囧r小猫/ 2023年08月17日 15:17/ 0 赞/ 198 阅读

相关 hexo-matery主题优化(二)

hexo-matery主题优化(二) > 作者：江南骚年目录： hexo搜索 hexo代码高亮消除文章toc目录的那一竖杠杠去掉友链

喜欢ヅ旅行/ 2022年11月24日 14:09/ 0 赞/ 171 阅读

相关 gulp教程之gulp-less

简介：使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

妖狐艹你老母/ 2022年09月25日 04:16/ 0 赞/ 312 阅读

相关 gulp模块的方法

1. src() gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。 js/app.js 指定确切的文件名

ゝ一世哀愁。/ 2022年09月21日 13:25/ 0 赞/ 178 阅读

相关 gulp插件/gulp模块

1、gulp 介绍：[http://www.gulpjs.com.cn/docs/getting-started/][http_www.gulpjs.com.cn_docs

雨点打透心脏的1/2处/ 2022年06月06日 01:20/ 0 赞/ 556 阅读

相关 gulp

jasmine jasmine是一个行为驱动开发的测试框架，不依赖任何js框架以及dom，是一个非常干净的以及友好的API的测试库 describe函数来定义

喜欢ヅ旅行/ 2022年05月24日 12:44/ 0 赞/ 278 阅读

相关 gulp优化hexo方法

gulp通过对站点使用的静态资源进行压缩，来优化网站的访问速度。首先安装gulp以及所需要的模块： npm install gulp -g

拼搏现实的明天。/ 2021年12月16日 17:49/ 0 赞/ 208 阅读

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

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

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

相关 Hexo博客主题优化

![标题图][1240] > `Hexo`博客主题优化添加背景图在 `themes//source/css/_custom/custom.styl` 中添加如下代

短命女/ 2021年09月17日 22:24/ 0 赞/ 496 阅读

相关 gulp 压缩打包js文件、gulp方法

gulp的方法 gulp.task(str,fn) 创建一个gulp任务 gulp.src(path)

亦凉/ 2021年07月24日 19:21/ 0 赞/ 744 阅读