Privacy policyContactsAbout siteOpinionsGitHubDonate
© EVILEG 2015-2018
Recommend hosting
TIMEWEB

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

Comments

Only authorized users can post comments.
Please, Log in or Sign up
ГК
March 20, 2019, 9:01 a.m.
Геннадий Костоянский

C++ - Test 002. Constants

  • Result:0points,
  • Rating points-10
ГК
March 20, 2019, 8:46 a.m.
Геннадий Костоянский

C++ - Test 002. Constants

  • Result:25points,
  • Rating points-10
Last comments
MU
March 20, 2019, 3:43 p.m.
Maciej Urmański

It's possible to simply add vote option for non logged users?
March 20, 2019, 9:45 a.m.
Евгений Легоцкой

Добрый день. Поппробуйте домен localhost, а url соответственно http://localhost Возможно, потребуется указать порт. Например, так http://localhost:8000
March 19, 2019, 12:57 p.m.
AlexanderBardin

Добрый день. А проверить работоспособность локально как-то можно не указывая реальнй сайт (еще в разработке)
March 16, 2019, 1:55 p.m.
Дмитрий

Спасибо за статью. Давно итересует следующий вопрос: с помощью переменных QMAKE_TARGET_COMPANYQMAKE_TARGET_PRODUCTQMAKE_TARGET_DESCRIPTIONможно задать свойства компилируемой программы, о...
JS
March 12, 2019, 10:19 a.m.
Jean Stefanovich

Большое спасибо за разъяснения!
Now discuss on the forum
March 20, 2019, 12:26 p.m.
Евгений Легоцкой

Лучше стараться избегать этого. Нормального механизма нет. Я просто выдёргиваю из бэкенда перевёденные куски шаблона, если нужно что-то задействовать в JS.
March 17, 2019, 10:47 p.m.
Евгений Легоцкой

Добрый день. Вот, нашлось у меня немного времени. Делается это через шаблон проектирования наблюдатель. GraphKS_mfvSlup.zip
ЧГ
March 15, 2019, 9:52 p.m.
Чарльз Грин

спасибо, попробую, отпишусь
m
March 15, 2019, 7:41 p.m.
mihamuz

Сори догадался)
n
March 12, 2019, 4:57 p.m.
newbie.works.with.QT

Большооооое спасибо!!!!!Не передать как я вам благодарен, спасибо что всегда отзываетесь.Теперь я смогу продолжить работу в QT!!! (пробую писать бота (Я как вы могли догадаться немного не пр...
Join us in social networks

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