stone

hexo 图片压缩和裁剪
网上找了一个 gulp 对 html,js,jpg 进行压缩的gulp 脚本,不得不感叹,前端真的是厉害,各种自动...
扫描右侧二维码阅读全文
13
2018/02

hexo 图片压缩和裁剪

网上找了一个 gulp 对 html,js,jpg 进行压缩的gulp 脚本,不得不感叹,前端真的是厉害,各种自动化功能。后面加上了图片裁剪的功能,成功将博客的大小从原来的43M 压缩到10M 以内,加快了发布和加载速度。

代码贴这里:

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 imageResize = require('gulp-image-resize')

// 压缩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('img-resize',function(){
    return gulp.src('./public/**/*.jpg')
        .pipe(imageResize({
            width : 1024
        }))
        .pipe(gulp.dest('./public'));
})
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/**/*.jpg')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 7}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
            {'verbose': true}))
        .pipe(gulp.dest('./public'))
});
// 默认任务
gulp.task('default', [
    'minify-html','minify-css','minify-js','img-resize','minify-images'
]);
Last modification:September 7th, 2018 at 08:19 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment