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 .

10% refund of hotel reservation amount on Booking
10% refund of hotel reservation amount on Booking
We offer a link with a 10% return on the amount of the order when booking a hotel through Booking
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
MB
July 14, 2019, 5:57 p.m.
Maksim Belikov

C++ - Test 005. Structures and Classes

  • Result:100points,
  • Rating points10
MB
July 14, 2019, 5:52 p.m.
Maksim Belikov

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:90points,
  • Rating points8
MB
July 14, 2019, 5:45 p.m.
Maksim Belikov

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

  • Result:71points,
  • Rating points1
Last comments
July 16, 2019, 3:15 p.m.
Evgenij Legotskoj

Конечно )) На самом деле не все читали Шлее... я например не читал ))
July 16, 2019, 3:05 p.m.
IscanderChe

Так пример с QLocalServer и QLocalSocket я целиком переписал с QTcpSocket и QTcpServer из книги Шлее. Принципиальное отличие - где коннект ставить. :)) Разве что на это упор сделать. Но я могу...
July 16, 2019, 2:47 p.m.
Evgenij Legotskoj

Лучше API ))) Кстати, по использованию QLocalServer и QLocalSocket на сайте нет статей, было бы очень полезно и хорошо пошло бы в раздел Qt.
July 16, 2019, 12:36 p.m.
IscanderChe

Да, прямой доступ не предполагается. Впрочем, можно, конечно, и напрямую. Всё равно всё локально происходит. Проблема в том, как донести сведения об изменениях в базе, которые вносит клиент, д...
b
July 16, 2019, 8:38 a.m.
bbb116

спасибо, до smart pointer еще не дошел )
Now discuss on the forum
July 17, 2019, 11:49 a.m.
Mihailll

В настройкак указан индификатор проекта и ключ. Осталось понять как использовать ключ. Попробовал вставить в этот запрос 'https://[PROJECT_ID].firebaseio/users/jack/name.json?access_to...
b
July 17, 2019, 9:01 a.m.
bbb116

Вообщем работает только если делать setSceneRect только в конструкторе главного окна, если потом менять rect например при вставке картинки то появляются сколлы все как надо только области не р...
July 17, 2019, 5:54 a.m.
Aleksej Vnukov

хочу не стандартный набор символов, а все ненужное убрать чтоб не мешало. для начала решил посмотреть как работает клава на родном примере, а он на телефоне не взлетел вот и начал разби...
July 17, 2019, 5:06 a.m.
Mihailll

Добрый день.Возможно вы сталкивались с облаками.Нужно из Qt создавать на облаке папки, записывать в папки файлы, читать и удалять с компьютера файлы.Возможно знаете, что лучше и проще испол...
Looking for a Job?
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

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

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