Форуми / National / Russian / Скины и дизайн / Очистка неиспользуемых стилей темы и минификации css/js

Если используете bootstrap, matarializecss или им подобные фреймворки для своих тем, то знакомы с проблемой: слишком много неиспользуемых стилей остается в файлах фреймворка.

Если кто-то заботится о скорости загрузки сайта в браузере клиента, наверняка пробовали чистить css файлы от таких стилей.

Если не чистили, то минифицировали css и js многие.

Я использую задачу Grunt для этих целей. Запустил задачу и через 2 секунды на выходе 2 файла:

1. Сжатый и очищенный CSS файл

2. Сжатый и очищенный JS файл

На выходе получается:

1. Примерно в 2 раза уменьшить файлы css за счет очистки и минификации

2. Один сжатый файл css вместо кучи маленьких файлов

3. Один сжатый файл js вместо нескольких

Например, у меня в теме используется 5 файлов css.

1  уже сжатый materialize.min.css - 155 кб. и еще 4 не сжатых, общим объемом 53 кб.

За счет очистки получается 1 файл 101 кб.

Выкладываю скрипт сюда, может пригодится кому. Мне сильно экономит время на работу, а клиентам с мобильниками на загрузку сайта.

https://www.cotonti.com/datas/users/grunt_clean_theme_resources_1197.zip

 

Как использовать:

Требуется NodeJS и NPM!

1. Распаковать в папку темы

2. Установить nodejs и npm, если их еще нет в системе

3. Запуcтить

Скачается Grunt и требуемые модули

4. Открыть файл Gruntfile.js и прописать пути к папкам с js, css и tpl файлами темы. Внутри файла есть комментарии.

5. Запустить задачу. В консоли, в папке темы, где лежит Gruntfile.js.

Без параметров - сжатие и очистка сразу js и css:

Очистка и сжатие css:

Очистка и сжатие js: