首页 > 其他 > 详细

gulp优化hexo方法

时间:2019-03-29 19:23:59      阅读:162      评论:0      收藏: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

gulp优化hexo方法

原文:https://www.cnblogs.com/Mayfly-nymph/p/10623234.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!