Рубрики
Без рубрики

Как построить минивер CSS с 8 линиями JavaScript

Всем нравится мини -сценарий. Министерство CSS смехотворно просто, поэтому сегодня я собираюсь показать Y … Tagged with JavaScript, CSS, WebDev, учебник.

Всем нравится мини -сценарий. Министерство CSS смехотворно просто, поэтому сегодня я собираюсь показать вам, как сделать минивер CSS, используя только 8 строк JavaScript.

Для нашего Минификатора нам сначала нужно подумать о том, что мы должны сделать, как это сделать, а затем сделать это.

Что мы должны сделать

Два шага к нашему миниверму будут:

  1. Избавиться от ненужных пробелов и полуколонов
  2. Избавиться от комментариев

Другие мини -микросыпания могут иметь дополнительные функции, которые заменяют черный с #000 И больше, но мы будем придерживаться двух шагов, чтобы он был хорош и прост и работал во всех браузерах.

Как мы делаем это?

Давайте предположим, что мы уже сделали страницу из HTML и CSS, с кнопкой, которая работает Minify () Когда он нажимается, и нам просто нужен JavaScript. Наш первый код будет выглядеть примерно так:

var inputs = document.getElementsByTagName("textarea");
function minify() {
  // turn inputs[1] into inputs[0], but minified
  /* array counts start with 0, so inputs[0] is the 
  first input and inputs[1] is the second */
}

Внутри функции Minify мы будем использовать Заменить () минимизировать значение первого входа. Функция замены требует знания Regexps Анкет В нашей функции мы будем использовать 4 заменить функции для министерства CSS. Я не собираюсь объяснять, как именно работают эти четыре регуляции.

Делать это

Шаг 1: Теперь мы используем следующие 3 строки кода, чтобы избавиться от пробелов и полуколонов, которые нам не нужны. Это легче сказать, чем сделать.

.replace(/([^0-9a-zA-Z\.#])\s+/g, "$1")
.replace(/\s([^0-9a-zA-Z\.#]+)/g, "$1")
// get rid of spaces next to non-alphanumerical (not a-z, A-Z, #, ., or 0-9) characters. for some reason combining these result in an error.
.replace(/;}/g, "}")
// get rid of semicolons where they're not needed (just before the end of a css declaration, the character })

Шаг 2: Комментарии CSS довольно распространены и выглядят так:

/* hello, i am a comment! */

Таким образом, нам нужен регулярность, чтобы избавиться от комментариев, что проще, чем вы думаете. Эта строка кода делает работу красиво:

.replace(/\/\*.*?\*\//g, "")
// tip: if you get rid of the \s you can read it better

Таким образом, мы получим весь наш сценарий, который выглядит так, только с 8 строками кода:

var inputs = document.getElementsByTagName("textarea");
var inputs = document.getElementsByTagName("textarea");
function minify() {
  inputs[1].value = inputs[0].value
    .replace(/([^0-9a-zA-Z\.#])\s+/g, "$1")
    .replace(/\s([^0-9a-zA-Z\.#]+)/g, "$1")
    .replace(/;}/g, "}")
    .replace(/\/\*.*?\*\//g, "");
}

И мы закончили! (Спасибо Habdul Hazeez за сообщения о ошибке комментариев. Это было исправлено. Также Спасибо Лироду за то, что сообщили об этой ошибке:)

main .foo .bar {
  display: none;
}
/* is not the same as */
main.foo.bar{display:none}

Дополнительный

Вы можете увидеть минивер в действии на этой странице. Полный код для сайта можно просмотреть здесь или здесь:

Спасибо за чтение!

Оригинал: “https://dev.to/derder56/how-to-build-a-css-minifier-with-8-lines-of-javascript-4bj3”

Читайте ещё по теме: