Как использовать Sass в Django и управлять версиями ресурсов CSS и JS для разбиения кеша

Question

Итак, я начал проект в Laravel/MySQL, и стало ясно после общения с более опытными разработчиками, что Django/PostgreSQL мог бы стать лучшим выбором для приложение.

Несмотря на то, что я был Django newb, я конвертировал его по Django, и в Laravel есть одна функция, которую я не вижу в Django, что мне интересно, как ее реализовать. В Laravel это комбинация Gulp и Elixir, которая управляет компиляцией Sass для CSS, а также версиями файлов CSS и JS.

В gulpfile.js для Laravel кода заключается в следующем:

elixir((mix) => { 
    mix.sass('styles.scss') 
     .version(['css/app.css', 'js/app.js', 'css/styles.css', 'js/custom.js']); 
}); 

Затем считывается в шаблон Лезвия с:

<!-- Styles --> 
<link rel="stylesheet" href="{{ elixir('css/app.css') }}"> 
<link rel="stylesheet" href="{{ elixir('css/styles.css') }}">  

<!-- Scripts --> 
<script src="{{ elixir('js/app.js') }}"></script> 
<script src="{{ elixir('js/custom.js') }}"></script> 

я не вижу подобную функциональность в Django так было интересно, как для его реализации, потому что очень удобно поворачивать watch, а затем скомпилировать Sass-> CSS и JS и версировать.

Я вижу различные npm пакеты там: gulp, gulp-django, django-sass и т.д. А потом я вижу другие пакеты, такие как gulp-buster или gulp-cache-bust. Мне непонятно, если gulp поставляется с этими пакетами, если их необходимо загрузить в дополнение к gulp, или мне просто нужен django конкретный gulp.

Фигурированный кто-то здесь знает, как добавить аналогичную функциональность в комбинацию Gulp/Elixir в Ларавеле.

Answer 1

Я использую django_assets для этого. Для моего CSS и SASS файлов я использую assets.py файл, который выглядит следующим образом:

css_bundle = Bundle(
    'scss/main.scss', 
    depends=('scss/**/*.scss',), 
    filters='pyscss,cssmin', 
    output='compiled/main.min.css' 
) 

register('css_bundle', css_bundle) 

Что я могу затем включить в моих шаблонах, как это:

{% assets "css_bundle" %} 
    <link rel="stylesheet" href="{{ ASSET_URL }}"/> 
{% endassets %} 

опустошение кэш построен прямо в, и вы можете сделать что-то подобное для файлов JS.