Django - Tutorial 026. Setting up the Minification of CSS and JavaScript code in PyCharm

Minification, CSS, JavaScript

When developing a website, it is often noticed that the site should have a short response time to the user's actions, so they apply various methods to improve the site's performance, such as caching data on the user side, using cookies, as well as minimizing CSS and JavaScript files. Minimizing the code of these files allows you to remove unnecessary spaces, symbols and comments that are not needed on the production server, but are only required for project development.

Traditionally, an additional file extension min is added to the original file extension, which means a minified file.

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

I propose to set up the PyCharm development environment to automatically minify all these files in your Django project.

Minimizing the css and jsavascript code is only supported in PyCharm Professional Edition.

An important point, the configuration will be done under the Ubuntu-based operating system KDE Neon 5.8. Installing the necessary packages for Windows, I do not consider, because I believe that the development of Django project under this OS is a mauveton.

What made minification?

The code will be minified by two utilities:

  • YUI Compressor - we will use it to minimize CSS
  • Closure Compiler - we will use it to minimize JavaScript

In principle, YUI Compressor can be used to minify JavaScript code, but with the ECMA 6 version, which is also used for me, it gave out errors. So I used the Closure Compiler to minify JavaScript .

Installing

To install these packages, use the Node Package Manager (npm).

To do this, install NPM , if it is not already installed.

sudo apt install nodejs npm

Next, from the user's home folder, we will install the packages through NPM

npm install yuicompressor
npm install closure-compiler

The programs will be installed in the node_modules directory in your home directory.

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

Configuring PyCharm

To configure the minimization, you need to create a File Watcher, which will run the required program when changing files. At the same time, PyCharm already has preconfigured file watchers, which only need to add paths to the minifier files being used.

Configuring CSS minification

To do this, go to the settings File | Settings we are looking for the menu item Tools | File Watcher , in File Wather , press the plus button to add an observer and select YUI Compressor CSS . In Watcher Settings , you should specify the path to the executable file yuicompressor- <version> .jar for the Program input field.

It will be located along the following path:

/home/user/node_modules/yuicompressor/buils/yuicompressor-<version>.jar

Confirm by creating an watcher, apply the settings.

Configuring JavaScript minification

To do this, go to the settings File | Settings we are looking for the menu item Tools | File Watcher , in File Wather , press the plus button to add an observer and select Closure Compiler . In Watcher Settings , you must specify the path to the executable file compiler.jar for the Program input field.

It will be located along the following path:

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

Confirm by creating an watcher, apply the settings.

To support the JavaScript ECMA 6 standard, in Watcher Settings, in the Arguments field, add the following argument, which will be passed to the utility at startup --language_in=ECMASCRIPT6

For Django I recommend VDS-server of Timeweb hoster .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

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

С уважением

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

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

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

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

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

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

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

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

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

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

С уважением

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

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

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, причём в автоматическом режиме. Просто там вызов вспомогательной утилиты, там, там, в итоге набегает на пол секунды, если утрированно говорить.

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

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

p
Feb. 17, 2020, 2:41 p.m.
pstMem

C++ - Тест 003. Условия и циклы

  • Result:85points,
  • Rating points6
z
Feb. 17, 2020, 6:02 a.m.
zet

C++ - Test 006. Enumerations

  • Result:80points,
  • Rating points4
z
Feb. 17, 2020, 5:49 a.m.
zet

C++ - Test 001. The first program and data types

  • Result:80points,
  • Rating points4
Last comments
Feb. 17, 2020, 3:22 a.m.
Evgenij Legotskoj

Добрый день. Это кастомный тег, помещается в файл, который находится в каталоге templatetags myapp/ templatetags/ myapp.py
B
Feb. 16, 2020, 1:36 p.m.
BahaMeirman

Добрый вечер! Монжно по подробней о теге get_companion? ссылка не работает.
Feb. 16, 2020, 9:35 a.m.
Evgenij Legotskoj

Добрый день. На GitHub исходники, можете посмотреть в официальном репозитории
B
Feb. 16, 2020, 9:29 a.m.
BahaMeirman

Здравстсвуйте Евгений, непонятно мне где эти исходники найти?
Now discuss on the forum
IP
Feb. 20, 2020, 1:24 a.m.
Igor' Poroshin

QSqlQuery query("SELECT CONCAT("#", LPAD(HEX(`t`.RGB), 6, 0)) FROM table AS t");query.exec(); while (query.next()) { QColor(query.value(0).toString()); }
IP
Feb. 19, 2020, 11:55 p.m.
Igor' Poroshin

qDebug() << model->lastError().text() - возвращает текст и код ошибки, который возвращает база данных, чаще всего ошибка бывает из-за неправильного SQL запроса qDebug() << mo…
Feb. 19, 2020, 8:55 a.m.
Mihailll

Можно через сервер сделать
V
Feb. 19, 2020, 7:09 a.m.
Vitali

Да, прямо сходу не заработало, а сейчас просто некогда разбираться, да и я уже решил не использовать в этом приложении WebEngine. Ошибка: WebEngineContext used before QtWebEngine::initialize(…
Feb. 19, 2020, 7:01 a.m.
BlinCT

Просто реально не вижу тут каких то проблем в модели, вот вообще ничего. Но она все равно не отображается, то есть ладно бы если данные бы не появлялись а сама таблица была бы. Так и таблиц…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB