Реклама

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

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь

Qt - Тест 001. Сигналы и слоты

  • Результат 0 баллов
  • Очки рейтинга -10
  • boa
  • 10 декабря 2017 г. 3:04

Qt - Тест 001. Сигналы и слоты

  • Результат 84 баллов
  • Очки рейтинга 4
  • Shalfy
  • 8 декабря 2017 г. 14:05

Qt - Тест 001. Сигналы и слоты

  • Результат 100 баллов
  • Очки рейтинга 10
Последние комментарии
  • EVILEG
  • 7 декабря 2017 г. 9:47

Django - Урок 011. Добавление комментариев на сайт с Django

Визуальный пример чего? комментариев? При ответе на конкретный комментарий рядом с ником отвечающего будет стрелочка и указание ник другого пользователя. Который будет ссылкой на коммента...

  • Bernar
  • 7 декабря 2017 г. 9:24

Django - Урок 011. Добавление комментариев на сайт с Django

есть визуальный пример ?

  • EVILEG
  • 6 декабря 2017 г. 11:30

Django - Урок 011. Добавление комментариев на сайт с Django

Да, так будет даже лучше, я на сайте уже обновил до такого вида код Вот это уже не нужно if request.method == 'POST': Поскольку Вы и так используете метод post, то есть эта про...

  • Bernar
  • 6 декабря 2017 г. 11:19

Django - Урок 011. Добавление комментариев на сайт с Django

сделал немного по другому class EArticleView(View): template_name = 'knowledge/article.html' comment_form = CommentForm def get(self, request, *args, **kwargs): ...

Сейчас обсуждают на форуме

Как значение текущего элемента ListView получить вне ListView

Вот реально огромное спасибо!! У вас большое терпение с нами возиться и отзывчивость.

  • EVILEG
  • 11 декабря 2017 г. 8:09

QCustomPlot исчезает часть графика при перестроении

Объявить volumeAxisRect в заголовочном файле

  • EVILEG
  • 9 декабря 2017 г. 21:24

Как написать парсер страницы при помощи js

Эм... лично я даже растерялся от такого вопроса... У javascript есть методы типо document.getElementById document.getElementByTag, которые выбирают нужные теги и мож...

Ошибки при многопоточном запуске функции библиотке

Большое спасибо, так заработало QFuture<void> Perebor2 = QtConcurrent::map(Perebor,[=](const double& d){ StrategyCod(d,this);});

  • grig_p
  • 8 декабря 2017 г. 12:49

Прерывание таймера в режиме singleShot

спасибо. У меня логика такая, что таймер я должен перезапустить по определенному событию. То есть, событие, запускающее таймер, при срабатывании в период его ожидания, должно запустить таймер ...