我在使用 gulp 压缩 css 和 js 文件时遇到问题

Question

这些文件正在缩小，但谷歌指责这些文件的重量，并表示使用 gzip 来压缩它们。但我不知道如何在html中使用gzip。 我需要有关如何正确压缩这些文件并通过 gulp 在 html 中使用它们的帮助。

请不要关闭该问题，我已经尝试解决此问题几个小时了，但无法解决。

我的吞咽文件

// Load modules
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const cleanCss = require('gulp-clean-css');
const gzip = require('gulp-gzip');

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// SASS
function compliaSass() {
    // return gulp.task('compress', function() {
    //     return gulp
    //     .src('.core/scss/*')
    //     .pipe(sass({ outputStyle: 'compressed' }))
    //     .pipe(
    //         autoprefixer({
    //             browsers: ['last 2 versions'],
    //             cascade: false,
    //         })
    //     )
    //     .pipe(gzip())
    //     .pipe(gulp.dest('assets/css/'))
    //     .pipe(browserSync.stream());
    // })
    return gulp
    .src('.core/scss/*')
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(
        autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
        })
    )
    .pipe(concat('style.css'))
    .pipe(cleanCss())
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream());
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// JS Main

function gulpJS() {
    return gulp
        .src(['.core/js/*'])
        .pipe(concat('main.js'))
        .pipe(
            babel({
                presets: ['env'],
            })
        )
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream());
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// SASS Plugins

function pluginsJs() {
    return gulp
        .src(['node_modules/jquery/dist/jquery.min.js'])
        .pipe(concat('plugins.js'))
        .pipe(gulp.dest('assets/js/'))
        .pipe(browserSync.stream());
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// Live Browser

function browser() {
    browserSync.init({
        server: {
            baseDir: './',
        },
    });
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// Minify images
function imageMin() {
    return gulp
        .src(['.core/images/*'])
        .pipe(
            imagemin([
                imagemin.gifsicle({ interlaced: true }),
                imagemin.mozjpeg({ quality: 20, progressive: true }),
                imagemin.optipng({ optimizationLevel: 5 }),
                imagemin.svgo({
                    plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
                }),
            ])
        )
        .pipe(gulp.dest('assets/images/'));
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// Images WEBP

function webP() {
    return gulp
        .src(['.core/images/**/*'])
        .pipe(webp())
        .pipe(gulp.dest('assets/images/'));
}

//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// Watch

function watch() {
    gulp.watch(['.core/scss/**/*'], compliaSass);
    gulp.watch(['.core/js/*.js'], gulpJS);
    gulp.watch(['.core/js/plugins/*.js'], pluginsJs);
    gulp.watch(['*.html']).on('change', browserSync.reload);
}

exports.compliaSass = compliaSass;
exports.gulpJS = gulpJS;
exports.pluginsJs = pluginsJs;
exports.browser = browser;
exports.watch = watch;
exports.imageMin = imageMin;
exports.webP = webP;

exports.default = gulp.parallel(watch, browser, compliaSass, gulpJS, pluginsJs);

Answer 1

在每个函数中都包含以下几行：

.pipe(uglify()) // Minify JavaScript files
.pipe(gzip())  // Compress with gzip