美文网首页
Hexo静态资源压缩

Hexo静态资源压缩

作者: LittleReds | 来源:发表于2019-04-01 15:13 被阅读0次

    静态资源压缩可以优化网页的访问速度、提高用户体验

    1. 安装gulp

    在站点目录下

    npm install gulp -g
    npm link gulp
    

    或者

    npm install gulp --save
    
    1. 安装gulp插件
    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
    
    1. 创建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');
    // 压缩css文件
    gulp.task('minify-css', function() {
      return gulp.src('./public/**/*.css')
      .pipe(minifycss())
      .pipe(gulp.dest('./public'));
    });
    // 压缩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'))
    });
    // 压缩js文件
    gulp.task('minify-js', function() {
        return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });
    // 压缩 public/demo 目录内图片
    gulp.task('minify-images', function() {
        gulp.src('./public/demo/**/*.*')
            .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/uploads'));
    });
    // 默认任务 gulp 4.0 适用的方式
    gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'
     //build the website
    ));
    
    1. 静态资源压缩

    只要每次在执行hexo g命令后执行gulp就可以进行静态资源压缩,压缩后再同步到github上

    hexo g
    gulp
    hexo d
    

    相关文章

      网友评论

          本文标题:Hexo静态资源压缩

          本文链接:https://www.haomeiwen.com/subject/alyvbqtx.html