Evgenii Legotckoi
Evgenii LegotckoiҚыр. 17, 2017, 4:10 Т.Ж.

Django - 026-сабақ. PyCharm жүйесінде CSS және JavaScript кодын кішірейтуді орнату

Сайтты әзірлеу кезінде көбінесе сайттың пайдаланушы әрекеттеріне жауап беру уақыты төмен болуы керек екеніне назар аударылады, сондықтан сайт жұмысын жақсарту үшін әртүрлі әдістер қолданылады, мысалы, пайдаланушы жағында деректерді кэштеу, cookie файлдарын пайдалану және кішірейту. CSS және JavaScript файлдары. Бұл файлдардың кодын кішірейту өндірістік серверде қажет емес, тек жобаны әзірлеу үшін қажет қажет емес бос орындарды, белгілерді және түсініктемелерді жоюға мүмкіндік береді.

Дәстүрлі түрде қосымша кеңейтім бастапқы файл кеңейтіміне min кеңейтімімен қосылады, бұл кішірейтілген файлды білдіреді.

  • style.css -> style.min.css
  • scripts.js -> scripts.miin.js

Мен Django жобаңыздағы осы файлдардың барлығын автоматты түрде кішірейту үшін PyCharm әзірлеу ортасын орнатуды ұсынамын.

Css және jsavascript кодын кішірейтуге тек PyCharm кәсіби шығарылымында қолдау көрсетіледі.

Маңызды жайт, орнату Ubuntu негізіндегі KDE Neon 5.8 операциялық жүйесімен орындалады . Мен Windows жүйесінде қажетті бумаларды орнатуды ойламаймын, себебі бұл ОЖ үшін Django жобасын жасау дұрыс емес деп ойлаймын.


Кішірейтілген деген не?

Кодты азайту екі қызметтік бағдарлама арқылы жүзеге асырылады:

  • YUI Compressor - біз оны CSS-ті кішірейту үшін қолданамыз
  • Closure Compiler - біз оны JavaScript кішірейту үшін қолданамыз

Негізінде, YUI Compressor JavaScript кодын кішірейту үшін де пайдаланылуы мүмкін, бірақ мен пайдаланатын ECMA 6 нұсқасымен ол қателер берді. Сондықтан мен JavaScript кішірейту үшін Closure Compiler. қолдандым.

Орнату

Бұл бумаларды орнату үшін Node Package Manager (npm) пайдаланыңыз.

Ол үшін NPM орнатпаған болсаңыз, орнатыңыз.

sudo apt install nodejs npm

Әрі қарай, пайдаланушының үй қалтасынан пакеттерді NPM арқылы орнатамыз.

npm install yuicompressor
npm install closure-compiler

Бағдарламалар үй каталогындағы node_modules каталогында орнатылады.

../node_modules
  ../yuicompressor
  ../closure-compiler
  ../google-closure-compiler

PyCharm орнату

Кішірейтуді орнату үшін файлдарды өзгерту кезінде қажетті бағдарламаны іске қосатын Файл бақылау құралын жасау керек. Сонымен қатар, PyCharm-да алдын ала конфигурацияланған файлдарды бақылау құралдары бар, оларда тек минификатордың орындалатын файлдарына жолдарды қосу керек.

CSS минификациясын орнату

Ол үшін Файл | параметрлеріне өтіңіз Параметрлер мәзір элементін іздеңіз Құралдар | File Watcher, File Wather қолданбасында бақылаушыны қосу үшін плюс түймесін басып, YUI Compressor CSS таңдаңыз. Watcher Settings ішінде yuicompressor- орындалатын файлға жолды көрсету керек. Бағдарламаны енгізу өрісі .құмыра.

Ол келесі жолда орналасуы керек:

/home/user/node_modules/yuicompressor/buils/yuicompressor- .jar

Біз бақылаушының жасалуын растаймыз, параметрлерді қолданамыз.

JavaScript минификациясын орнату

Ол үшін Файл | параметрлеріне өтіңіз Параметрлер мәзір элементін іздеңіз Құралдар | File Watcher, File Wather ішіндегі бақылаушыны қосу үшін қосу түймесін басып, Closure Compiler таңдаңыз. Watcher Settings ішінде compiler.jar. орындалатын файлға жолды көрсетіңіз. Бағдарлама енгізу өрісі.**

Ол келесі жолда орналасуы керек:

/home/user/node_modules/google-closure-compiler/compiler.jar

Біз бақылаушының жасалуын растаймыз, параметрлерді қолданамыз.

JavaScript ECMA 6 стандартына қолдау көрсету үшін, іске қосу кезінде қызметтік бағдарламаға жіберілетін Аргументтер өрісіндегі Watcher параметрлеріне келесі аргументті қосу керек --language_in=ECMASCRIPT6

Django үшін Timeweb хостының VDS-сервері ұсынамын.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

Макар Карабасов
  • Шілде 25, 2019, 5:18 Т.Ж.
  • (өңделген)

Евгений, вот стал делать новый проект (используя некоторые наработки старого) и снова возникло желание делать автоматом минификации. Полез поглядеть, что у меня в закладках и увидел, что опять судьба меня сталкивает с твоим сайтом. Хочу поблагодарить за действительно качественный контент по теме.
А теперь вопрос. Вот всё-таки, как ни крути, а этот способ на мой взгляд достаточно сложный. Неужели нету вариантов, как-то попроще это делать? Ну там добавить плагин к PyCharm или даже что-нибудь из pip установить для Django. Вопрос: Вы до сих пор пользуетесь именно этим методом? Или нашли что-то более простое?

С уважением

Evgenii Legotckoi
  • Шілде 25, 2019, 5:31 Т.Ж.

Макар, добрый день.

Да, я до сих пор использую этот способ. На самом деле ничего сложного здесь нет. Тем более, что это достаточно сделать один раз.
Ну и дополнительно ещё настраиваю области Scope, чтобы указать File Wactherу, какие именно файлы минифицировать.

В общем-то я как настроил последний раз год назад PyCharm, так и не возвращался к поиску иных способов минификации, иногда только Scope правлю, если добавляю новые JS, CSS файлы, которые нужно минифицировать.

Может быть, кто-то и заморочился с плагином для PyCharm, но я это не проверял, поскольку данный способ стандартный и является стандартным функционалом в IDE. А так это будет скорее велосипед с диалоговым окном в котором всё равно придётся указывать, где лежит сам минификатор, а его нужно откуда-то взять. В общем, если это как-то и упростит проект, то всего лишь на один абзац туториала, по-моему мнению.

Что касается pip... То есть утилита minify. Сам ей не пользовался, но что-то документация по настройке этой утилиты выглядит ещё больше, чем эта статья. Да и смысл замусоривать проект, если минификация - это всё-таки сторонний процесс, который должен делаться при разработке. Я бы не смешивал это всё.

Спасибо за отзыв.

Макар Карабасов
  • Шілде 25, 2019, 5:38 Т.Ж.

Евгений, а я вот задумываюсь попробовать вот это решение: https://django-compressor.readthedocs.io/en/latest/

Хотелось бы услышать ваше мнение. Хотя в принципе вы уже ответили на мой вопрос, выше. Ибо я придерживаюсь философии, что "Не трожь рабочую систему" (во времена работы в фирме по продаже и настройке компьютеров, тогда ещё windows 98 и Millenium, у нас такой плакат висел на стене), что означет, если работает, проверено годами и устраивает, не надо оптимизировать.

Макар Карабасов
  • Шілде 25, 2019, 5:42 Т.Ж.

И ещё вопрос, совершенно не по теме.

Евгений, я вот только задал вопрос, а Вы сразу ответили. У вас какие-то нотификации вас об этом известили? Если почта, то вопрос снят, но если это какие-нибудь сообщения в мессанджер (телеграм через бот или ватсап через что-то) или даже SMS, то хотелось бы посмотреть реализацию таких уведомлений. У вас есть статьи или какие-либо материалы по этой теме?

С уважением

Evgenii Legotckoi
  • Шілде 25, 2019, 5:54 Т.Ж.
  • (өңделген)

Я вот посмотрел описание той утилиты, о которой вы спросили. И могу сказать, что я не хотел бы её подключать в свой проект.

Во-первых эта утилита и так использует те минификаторы, которые я перечислил в своей статье. Цитирую из описания

Django Compressor also comes with built-in support for YUI CSS and JS compressor, yUglify CSS and JS compressor, the Google's Closure Compiler , a Python port of Douglas Crockford's JSmin, a Python port of the YUI CSS Compressor csscompressor and a filter to convert (some) images into data URIs.

То есть что здесь Google's Closure Compiler и YUI CSS Compressor , что там.

Во-вторых нужно прописывать в теги compress настраивать setup.py и т.д. У меня против такого есть два довода.

1) Я не хотел бы смешивать процесс разработки и сам готовый продукт, а минификация файлов - это как раз процесс разработки. Признаки функционала по минификации на мой взгляд не должны присутствовать в готовом продукте.
2) даже если в документации и написано, что можно отключить минификацию в этом модуле с помощью настроек в setup.py, но всё равно же эти теги будут вызываться при рендеринге страницы. А если учесть, что некоторые файлы для минификации будут в главном шаблоне, то получается, что при отдаче каждой страницы у нас будет вызываться этот тег, делаться там какая-то проверка, разрешено ли минифицировать или нет. А если это highload проект? Ну и зачем нам тогда искуственно снижать производительность сайта, когда можно сделать минификацию в IDE, причём в автоматическом режиме. Просто там вызов вспомогательной утилиты, там, там, в итоге набегает на пол секунды, если утрированно говорить.

Evgenii Legotckoi
  • Шілде 25, 2019, 5:57 Т.Ж.
  • (өңделген)

Вообще нотификации есть, написал их сам. При создании нового контента отсылается email, и уведомление в профиле на сайте. Но push нотификаций или sms я не делал. Поэтому тут подсказать или показать ничего не могу. А в случае с email это делается штатными средствами Django.

Пікірлер

Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
Кіріңіз немесе Тіркеліңіз
AD

C++ - Тест 004. Указатели, Массивы и Циклы

  • Нәтиже:50ұпай,
  • Бағалау ұпайлары-4
m
  • molni99
  • Қаз. 26, 2024, 1:37 Т.Ж.

C++ - Тест 004. Указатели, Массивы и Циклы

  • Нәтиже:80ұпай,
  • Бағалау ұпайлары4
m
  • molni99
  • Қаз. 26, 2024, 1:29 Т.Ж.

C++ - Тест 004. Указатели, Массивы и Циклы

  • Нәтиже:20ұпай,
  • Бағалау ұпайлары-10
Соңғы пікірлер
ИМ
Игорь МаксимовҚар. 22, 2024, 11:51 Т.Ж.
Django - Оқулық 017. Теңшелген Django кіру беті Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii LegotckoiҚаз. 31, 2024, 2:37 Т.Қ.
Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZEҚаз. 19, 2024, 8:19 Т.Ж.
Qt Creator көмегімен fb3 файл оқу құралы Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь МаксимовҚаз. 5, 2024, 7:51 Т.Ж.
Django - Сабақ 064. Python Markdown кеңейтімін қалай жазуға болады Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas5Шілде 5, 2024, 11:02 Т.Ж.
QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Енді форумда талқылаңыз
m
moogoҚар. 22, 2024, 7:17 Т.Ж.
Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
Evgenii Legotckoi
Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
t
tonypeachey1Қар. 15, 2024, 6:04 Т.Ж.
google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
NSProject
NSProjectМаусым 4, 2022, 3:49 Т.Ж.
Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

Бізді әлеуметтік желілерде бақылаңыз