Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
182 / 169 / 20
Регистрация: 18.02.2010
Сообщений: 1,683
1

Gulp критичный css, инструмент для генерации критичного css

04.12.2017, 00:22. Показов 1080. Ответов 2
Метки нет (Все метки)

Пытаюсь закрыть последний пункт в googlespeed: "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы".

Вроде как нашёл плагин нужный для галпа, но оно отказывается работать и выдаёт: "SyntaxError: Unexpected token )"

gulpfile.js:

Javascript
1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp'),
crit = require ('gulp-critical-css');
 
 
 
gulp.task('crit', () => {
    gulp.src('dist/css/style.css')
        .pipe(criticalCss())
        .pipe(gulp.dest('dist'))
);

К томуж из описания вроде как ещё надо самому указывать какие именно классы критичные в css, что бы плагин их подхватывал, а это совсем не комильфо:

CSS
1
2
3
4
.my-selector {
    critical: this;
    color: red;
}
Очень интересно узнать, как белые люди закрывают этот пункт по оптимизации ну и ещё интересней, как это сделать при помощи gulp?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.12.2017, 00:22
Ответы с готовыми решениями:

Плагин для gulp для минимизации CSS ?
Добрый день уважаемые. Подскажите, пожалуйста плагин под сборщик Gulp для минимизации CSS? Я...

Форматирование css в gulp
Подскажите, как с помощью gulp отформатировать css, чтобы было на выходе примерно так: input a{ ...

Gulp - минификация css в index.php
Нужен плагин для галпа, что бы css файл минифицыровал в <style>...</style> в самом index файле...

Плагин для css с возможностью создания переменных в css файле
Один раз наткнулся в интернете на интересный плагин для css, похожий на jquery для js. Там можно...

2
Джоуи
1070 / 632 / 240
Регистрация: 05.05.2015
Сообщений: 3,546
Записей в блоге: 2
04.12.2017, 01:54 2
У Вас в 6 строке открывается фигурная скобка а в 10 - обычная )
1
182 / 169 / 20
Регистрация: 18.02.2010
Сообщений: 1,683
04.12.2017, 20:10  [ТС] 3
А ну шикарно они у себя код на страничке плагина пишут, спасибо заработало. Хотя плагин не пригодился т.к. там оказалось самому надо указывать какой именно у меня css критичный, а плагин только всё это указанное собирает.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.12.2017, 20:10

Сверстаю бесплатно Html CSS Sass JS jQuery Gulp Webpack
Приветствую) Предлагаю бесплатную вёрстку по вашим макетам PSD. У меня нет потребности в макетах...

При установке gulp-clean-css удаляется файл fs-write-stream-atomic
При установке gulp-clean-css,происходит следующее C:\Open\OSPanel\domains\Compulink>npm install...

Что оптимальнее HTML + CSS + JS + С# или HTML + CSS + JS + Java и для каких задач?
Объясните, пожалуйста что оптимальнее и для каких задач HTML + CSS + JS + C# или HTML + CSS + JS +...

делаю сайт, подключил 2 .css, как указать, какой css использовать?
подключил 2 .css - один общий, другой для слайдера. и там и там есть body{ }, не могу поменять фон...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru