Gulp: меняем длинные классы на короткие

Уменьшаем размер проблемы на 50% при помощи gulp-selectors!

Когда я приступил к созданию новостного сайта то была задача: сделать так, чтобы он загружался молниеносно быстро. Папка сборки после всех этих волшебных минификаций и сжатий весила в общей сложности 200 Кб, мне требовалось довести этот показатель до минимума.

Для начала я наткнулся на комбинаторную библиотеку generatorics, которая должна была генерировать последовательности имен классов вроде (a, b, c, …). Но, увы, она не справилась с задачей, так как не могла обрабатывать последовательные селекторы в CSS-файлах.

Не сдался — попробовал gulp-selectors! В первый этап я включил в игнор все ID и селекторы, начинающиеся на js-, к которым привязана логика сайта. И вот что получилось:

• CSS-папка уменьшилась с 200 Кб до 100 Кб.

Настройки GULP:

Мой файл cssname.js

import gs from "gulp-selectors";
export const cssname = () => {
  var processors = {
    'css':  ['scss', 'css'],        // run the css processor on .scss and .css files
    'html': ['haml'],               // run the html processor on .haml files
    'js-strings':   ['js']          // run the js-strings plugin on js files
  },
  ignores = {
    classes: ['hidden', 'active','js-*'],  // ignore these class selectors,
    ids: '*'                        // ignore all IDs
  };
  return app.gulp.src([`${app.path.buildFolder}/**/*.css`, `${app.path.buildFolder}/**/*.html`])
  .pipe(gs.run({},ignores))
  .pipe(app.gulp.dest(`${app.path.buildFolder}`));
};

Вызов cssname в gulpfile.js:

Команда для установки: npm i gulp-selectors --save

Итог: