У меня возникли проблемы со сжатием файлов CSS и JS с помощью gulpCSS

Разбираемся в CSS
Ответить
Anonymous
 У меня возникли проблемы со сжатием файлов CSS и JS с помощью gulp

Сообщение Anonymous »

Файлы получаются минимизированными, но Google ругает их за вес и советует сжимать их с помощью gzip. Но я не знаю, как использовать gzip в html.
Мне нужна помощь, как правильно сжать эти файлы и использовать их в html с помощью gulp.
Пожалуйста, не надо. закройте проблему, я пытался решить ее несколько часов и не могу.
Мой файл gulp
// 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);


Подробнее здесь: https://stackoverflow.com/questions/789 ... -with-gulp
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»