Файлы получаются минимизированными, но 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
У меня возникли проблемы со сжатием файлов CSS и JS с помощью gulp ⇐ CSS
Разбираемся в CSS
-
Anonymous
1726717549
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);
Подробнее здесь: [url]https://stackoverflow.com/questions/78998072/im-having-trouble-compressing-css-and-js-files-with-gulp[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия