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 .

Virtual hosting with 10 percent discount
Virtual hosting with 10 percent discount
EVILEG offers reliable hosting with a 10% discount for virtual hosting and 5% for VPS
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
m
May 19, 2019, 1:49 a.m.
mahhaki

Qt - Test 001. Signals and slots

  • Result:78points,
  • Rating points2
S
May 17, 2019, 1:14 p.m.
SunBro

Qt - Test 001. Signals and slots

  • Result:42points,
  • Rating points-8
b
May 17, 2019, 4:18 a.m.
banana

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

  • Result:57points,
  • Rating points-2
Last comments
May 21, 2019, 8:10 p.m.
Дмитрий

Приветствую! Я думаю дойдёт и до этого, но пока изучать его у меня нет желания.
May 20, 2019, 7:20 p.m.
Евгений Легоцкой

Добрый день! Вы не думали разместить репозиторий проекта на GitHub?
P.
May 18, 2019, 2:03 p.m.
PELMYACH .

Спасибо большое! Вскоре буду разбираться!
May 18, 2019, 9:13 a.m.
Евгений Легоцкой

Добрый день! Отнимать значение общего счётчика можно в деструкторе класса кнопки QDynamicButton::~QDynamicButton(){ ResID--;} При этом я бы ещё переустанавливал значения вс...
P.
May 14, 2019, 10:33 p.m.
PELMYACH .

Здравствуйте!А не подскажите, как можно при удалении какой либо кнопки, у щётчика отнять значение?Дабы например четвёртой кнопке соответствовал ID 4, а не 5 скажем
Now discuss on the forum
May 24, 2019, 6:48 a.m.
Евгений Легоцкой

Если там будут только перечисления внутри namespace, то жа, достаточно будет заголовочного файла
May 24, 2019, 6:28 a.m.
Андрей Янкович

работает любой http сервер, и можно использовать обсалютно любой портпример <RemoteRepositories> <Repository> <Url>http://178.124.160.6:3030/A/B&l...;
May 23, 2019, 2:40 p.m.
Михаиллл

Попробовал сделать этот запрос по http и получил json файл. request.setUrl(QUrl("https://jsonplaceholder.typicode.com/todos/1")); Как Вы думаете, почему https не работает и как это и...
May 23, 2019, 10:42 a.m.
Михаиллл

Спасибо, помогло.
May 23, 2019, 6:31 a.m.
Евгений Легоцкой

Для задач и граф-то не нужен. Достаточно будет таблицы в локальной базе данных SQLite, в которой указывается задача, время и т.д. В этом разделе есть примеры по работа с базой д...

For registered users on the site there is a minimum amount of advertising

EVILEG
About
Services
Join us
© EVILEG 2015-2019
Recommend hosting TIMEWEB