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 .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
25 февраля 2018 г. 14:09
exxtra_noise

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

  • Результат 100 баллов
  • Очки рейтинга 10
25 февраля 2018 г. 14:06
exxtra_noise

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

  • Результат 60 баллов
  • Очки рейтинга -1
25 февраля 2018 г. 10:39
exxtra_noise

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

  • Результат 100 баллов
  • Очки рейтинга 10
Последние комментарии
26 февраля 2018 г. 0:55
soz7557

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

thanks, but Id should be the same the one as i select the image in tree view.

25 февраля 2018 г. 21:53
Console

Выпуск Qt 5.10

Здравствуйте.Планируется ли урок по Qt Network Authorization? Всё же интересная тема и информации маловато в интернете.

25 февраля 2018 г. 19:54
EVILEG

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

Сначала нужно что-нибудь написать, прежде чем это оптимизировать. А вообще все оптимизации исходят из совокупности условий, а не из того, что есть один танк и N треугольников. Да и области вид...

25 февраля 2018 г. 19:31
romankoshelev

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

А как насчет оптимизации. Тут ведь например будет ездить N треугольников, для каждого проводить линию и смотреть пересечения? +Это же происходит много раз в секунду.

25 февраля 2018 г. 16:15
EVILEG

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

Как вариант, использовать QLineF. Условно взять линию от положения танка, до положения треугольника. И проверить пересечение этой линии с другими линиями на карте с помощью метода intersect. Этот м...

Сейчас обсуждают на форуме
25 февраля 2018 г. 11:31
Mic78

How to retrieve a QCandlestickSet item from a QChartView?

Sorry, in the last sentence I wanted to write: "For that I need to know the maximum value of the QCandlestickSets in the zoomed area."

25 февраля 2018 г. 10:02
EVILEG

Проблема с ComboBox

Да, в принципе идея понятна. Можно воспользоваться одной исходной моделью и делать по ней поиск. Найденные элементы добавлять в модель для отображения. При этом исходная модель буд...

25 февраля 2018 г. 9:07
EVILEG

Qt управление окнами других программ

Добрый день! Это всё делается через WinAPI. В Qt не занимаются разработкой настолько платформозависимого функционала, который нужен единицам. Не знаю, что там было в Delphi, возможн...

21 февраля 2018 г. 13:26
sol11

Qtableviev после сортировки

Спасибо, всё заработало :) Единственное вот тут row на id поменял и всё круто :)) if(id == -1){ model->insertRow(model->rowCount(QModelIndex())); map...

20 февраля 2018 г. 13:18
alex_lip

Разбить один qml файл на несколько составляющих

Да спасибо. Просто после необходимости специфичных названий для файла - стараюсь обращать внимание на любую мелочь.