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 .

Comments

Only authorized users can post comments.
Please, Log in or Sign up
v
Jan. 17, 2019, 11:51 a.m.
vitalir12

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

  • Result:20points,
  • Rating points-10
v
Jan. 17, 2019, 11:49 a.m.
vitalir12

C++ - Test 002. Constants

  • Result:50points,
  • Rating points-4
v
Jan. 17, 2019, 11:13 a.m.
vitalir12

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

  • Result:28points,
  • Rating points-10
Last comments
I
Jan. 16, 2019, 8:06 a.m.
IscanderChe

Заработало. Забыл model->select(); вписать.
I
Jan. 16, 2019, 8:02 a.m.
IscanderChe

Всё равно пусто, хотя строка с данными в базу добавляется.
Jan. 16, 2019, 7:51 a.m.
Евгений Легоцкой

потому, что нужно сохранять информацию для всех остальных ролей и столбцов через вызов переопределённого метода. Да к тому же вы ещё и зациклили вызов метода data. QVariant MySqlTableModel:...
I
Jan. 16, 2019, 7:43 a.m.
IscanderChe

Сделал вот так. В tableView ничего нет, кроме заголовка. QVariant MySqlTableModel::data(const QModelIndex &index, int role) const{ if (role == Qt::DisplayRole) { QTime ...
Now discuss on the forum
Jan. 18, 2019, 11:26 a.m.
nayk1982

Для Desktop делал так: void pause(int ms){ QTimer timer; timer.setInterval( qBound(1, ms, 3600000) ); timer.setSingleShot(true); QEventLoop loop; QObject::connect(&...
Jan. 17, 2019, 12:01 p.m.
Алексей Внуков

у меня просто есть отдельное поле с чекбоксамими какие колонки нужно отображать CheckBox { id: checkBox text: qsTr("some text") checked: true onC...
Jan. 15, 2019, 4:53 p.m.
Михаиллл

Спасибо, заработало.Но выдало обычный текст без форатирования HTML.Придется искать дальше
Jan. 15, 2019, 12:52 p.m.
BlinCT

Я же вам выше написал CLion умеет работать с ремоут машинами. И Qt так же собирает.
Join us in social networks

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