© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

Django - Урок 026. Настройка минификации CSS и JavaScript кода в PyCharm

Minification, CSS, JavaScript

При разработке сайта часто обращают внимание на то, что сайт должен иметь малое время отклика на действия пользователя, поэтому применяют различные методы для улучшения производительности сайта, такие как кеширование данных на стороне пользователя, использование Cookie файлов, а также минификацию CSS и JavaScript файлов. Минификация кода этих файлов позволяет удалить ненужные пробелы, символы и комментарии, которые не нужны на рабочем сервере, а требуются лишь для разработки проекта.

Традиционно к исходному раширению файла добавляется дополнительное под расширение min, которое означает минифицированный файл.

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

Предлагаю настроить среду разработки PyCharm для автоматической минификации всех этих файлов в вашем Django проекте.

Минификация кода css и jsavascript поддерживается только в PyCharm Professional Edition.

Важный момент, настройка будет производится под Ubuntu-based операционную систему KDE Neon 5.8 . Установку необходимых пакетов под Windows я не рассматриваю, поскольку считаю, что разработка Django проекта под этой ОС - это моветон.

Чем производится минификация?

Минификация кода будет производиться двумя утилитами:

  • YUI Compressor - будем использовать его для минификации CSS
  • Closure Compiler - будем использовать его для минификации JavaScript

В принципе YUI Compressor может использоваться и для минификации JavaScript кода, но с версией ECMA 6 , который также используется у меня он выдавал ошибки. Поэтому для минификации JavaScript я использовал Closure Compiler.

Установка

Для установки этих пакетов используем Node Package Manager (npm).

Для этого установим NPM , если он у вас ещё не установлен.

sudo apt install nodejs npm

Далее из домашней папки пользователя произведём установку пакетов через NPM

npm install yuicompressor
npm install closure-compiler

Программы будут установлены в каталог node_modules в вашей домашней директории.

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

Настройка PyCharm

Для настройка минификации необходимо создать File Watcher , который будет запускать необходимую программу при изменении файлов. При этом в PyCharm уже имеются преднастроенные наблюдатели файлов, в которые необходимо лишь добавить пути к исполяемым файлам минификаторов.

Настройка минификации CSS

Для этого переходим в настройки File | Settings ищем там пункт меню Tools | File Watcher, в File Wather нажимаем кнопку с плюсом для добавления наблюдателя и выбираем YUI Compressor CSS. В Watcher Settings необходимо для поля ввода Program указать путь к исполняемому файлу yuicompressor-<version>.jar.

Он должен будет располагаться по следующему пути:

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

Подтверждаем созданием наблюдателя, применяем настройки.

Настройка минификации JavaScript

Для этого переходим в настройки File | Settings ищем там пункт меню Tools | File Watcher, в File Wather нажимаем кнопку с плюсом для добавления наблюдателя и выбираем Closure Compiler. В Watcher Settings необходимо для поля ввода Program указать путь к исполняемому файлу compiler.jar.

Он должен будет располагаться по следующему пути:

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

Подтверждаем созданием наблюдателя, применяем настройки.

Для поддержки стандарта JavaScript ECMA 6 необходимо в Watcher Settings в поле Arguments добавить следующий аргумент, который будет передаваться утилите при запуске --language_in=ECMASCRIPT6

Для Django рекомендую VDS-сервера хостера Timeweb .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
15 июня 2018 г. 12:42
Nicky

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат 100 баллов
  • Очки рейтинга 10
15 июня 2018 г. 12:36
Nicky

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

  • Результат 57 баллов
  • Очки рейтинга -2
15 июня 2018 г. 12:29
Nicky

C++ - Тест 001. Первая программа и типы данных

  • Результат 46 баллов
  • Очки рейтинга -6
Последние комментарии
18 июня 2018 г. 7:12
EVILEG

PyQt5 - Урок 007. Работаем с QML QtQuick (Сигналы и слоты)

Я вот сейчас банальность скажу, но у меня всё работало. Так что даже и не знаю, надо на код смотреть, что ещё у вас добавлено или отсутствует из библиотек. P/S/ Извините, вы сейчас вс...
18 июня 2018 г. 7:10
EVILEG

Qt/C++ - Урок 042. PopUp уведомление в стиле Gnome с помощью Qt

Недоработки, вряд ли этот зверь вообще является официально поддерживаемым
18 июня 2018 г. 7:01
EVILEG

QML - Урок 016. База данных SQLite и работа с ней в QML Qt

что-то мне сдаётся, что здесь просто пересобрать проект нужно с удалением build каталога
18 июня 2018 г. 7:00
EVILEG

Qt - WinAPI. Как показать запущенное приложение поверх своего приложения

Если зарыться в API системы, то, думаю, что можно, тут тоже использовался WinAPI.
16 июня 2018 г. 15:19
pro100belik

Qt - WinAPI. Как показать запущенное приложение поверх своего приложения

А можно по ID процесса  выводить на передний план окно? myProcess->processId();
Сейчас обсуждают на форуме
19 июня 2018 г. 7:56
EVILEG

как редактировать порядок обхода этементов по нажатию TAB в Qt5 qml

Что-то наподобие такого TextField { Keys.onReturnPressed: nextItemInFocusChain().forceActiveFocus()}
19 июня 2018 г. 6:31
kabanov

Как сохранить фокус в TextField после перезагрузки модели

Rectangle { ListView { id: listView delegate: Item { id: cDelegate Item { Row { ComboBox { ...
18 июня 2018 г. 10:51
alex_lip

Qml and JavaScript

В том то и дело что просто в JS так нельзя Если использовать state - onReleased - не нужен вот так все работает Text { ...
18 июня 2018 г. 7:16
EVILEG

почему не выполняется код после вызова слота?

в рамках какого кода, из вашего вопроса не понятно, к чему вы задали этот вопрос и к чему это относится. Если мне ещё ясно, к какой статье этот вопрос был задан, поскольку я слежу за всем ре...

Рекомендуемые страницы