HEXO笔记③-使用Gulp压缩发布的文件

安装 Gulp 各个压缩模块并编写任务执行文件压缩

安装 Gulp 和各个压缩模块

1 2	> npm install gulp -g > npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

编写 Gulp 压缩任务 js 代码

gulpfile.js

const gulp = require("gulp");
const minifyCss = require("gulp-minify-css");
const uglify = require("gulp-uglify");
const htmlmin = require("gulp-htmlmin");
const htmlClean = require("gulp-htmlclean");
const 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.mozjpeg({ progressive: true }),
                    imagemin.optipng({ optimizationLevel: 7 }),
                ],
                { verbose: true }
            )
        )
        .pipe(gulp.dest("./public/images"));
});

// 默认任务
gulp.task("default", gulp.parallel("minify-html", "minify-css", "minify-js"));

执行 Gulp 压缩任务

> gulp