javascript - 如何在 Django 中使用 Sass 以及版本控制 CSS 和 JS Assets 以清除缓存

Question

所以我在 Laravel/MySQL 中开始了一个元素，在与一些更有经验的开发人员交谈后，我发现 Django/PostgreSQL 可能是该应用程序的更好选择。

尽管我是 Django 新手，但我一直在通过 Django 转换它，Laravel 中有一个我在 Django 中没有看到的功能，我想知道如何实现。在 Laravel 中，它是 Gulp 和 Elixir 的组合，用于管理 Sass 到 CSS 的编译以及 CSS 和 JS 文件的版本控制。

在 Laravel 的 gulpfile.js 中，代码是这样的:

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

然后将其读入 Blade 模板:

<!-- 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 然后编译 Assets Sass->CSS 和 JS 并进行版本控制非常方便。

我确实看到了各种 npm 包:gulp、gulp-django、django-sass、等。然后我看到其他包，如 gulp-buster 或 gulp-cache-bust。我不清楚 gulp 是否随这些软件包一起提供，是否需要在 gulp 之外下载它们，或者我只需要一个 django 特定的 gulp。

我想这里有人会知道如何在 Laravel 中为 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 文件执行类似的操作。