使用npm和Django加载CSS静态文件的正确方法是什么？

Question

我想从node_modules目录加载我的静态css文件（例如，Bootstrap），如下所示：

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />

当我将.../node_modules/置于我的STATICFILES_DIRS设置中时，这是有效的。但是，它还会向我的/static/文件夹中添加绝对大量的文件 - 主要是devDependencies，我不需要在前端访问。

通过npm包含某些静态资源的最佳做法是什么，但不包括node_modules文件夹中/static/的所有内容？

或者，包含这么多无关文件是否合适？这是最好的解决方案吗？

Answer 1

我所做的是以下内容，

STATICFILES_DIRS = (
    os.path.join(DJANGO_PROJECT_DIR, 'static'),
    os.path.join(ROOT_DIR, 'node_modules', 'd3', 'build'),
    os.path.join(ROOT_DIR, 'node_modules', 'c3'),
)

这样只会将所需文件放在我的静态文件夹中。

Answer 2

我个人认为将这些无关的开发文件存放在node_modules中（并复制到STATIC_ROOT）是没问题的。如果你的node_modules文件夹很大，你的里程可能会有所不同，但是对于我的用例来说，增加一倍并不是一件大事，而且在安装它们时不必在STATICFILES_DIRS中列出每个模块是很方便的。

STATICFILES_DIRS = (
    ...
    os.path.join(BASE_DIR, 'node_modules'),
    ...
)

然后在模板中执行：

<script src='{% static 'bootstrap/dist/css/bootstrap.min.css' %}'></script>

如果文件夹确实失控，如果你开始遇到冲突，或者有一个你真的不想服务的图书馆，Jostcrow的答案（或写一个习惯） staticfiles finder）可能有意义。

此外，可能值得考虑尝试将所有内容捆绑在一起。如果您的所有内容都存在于捆绑的JS / CSS文件中，那么只需将这些文件打包到您选择的应用程序中即可解决整个问题。

Answer 3

为避免在静态文件夹中导入许多未使用的文件，我使用Gulp脚本复制了所需的项目。安装软件包后，我使用NPM script调用Gulp，因此它不会影响我的日常工作流程。

package.json：

{
  "dependencies": {
    "bootstrap": "^4.3.1",
    "gulp": "^4.0.2",
    "jquery": "^3.4.1"
  },
  "scripts": {
    "install": "gulp"
  }
}

gulpfile.js

const { series, src, dest } = require('gulp');

// Task 1: copy bootstap's assets to /_vendor/
function bootstrap() {
  const files = [
    'node_modules/bootstrap/dist/css/bootstrap.min.css',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

// Task 2: copy jquery's assets to /_vendor/
function jquery() {
  const files = [
    'node_modules/jquery/dist/jquery.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

exports.default = series(bootstrap, jquery)

my_project/settings.py：

STATICFILES_DIRS = [
    str(BASE_DIR / '_vendor'),  # populated by gulp
]

Django模板：

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" />

奖金?

在Gulp文件中，您可以连接和缩小文件。例如，这是我针对Blueimp的文件上传库的Gulpfile：

const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// Task 3: minify blueimp's assets and save to /_vendor/
function blueimp() {
  const files = [
    'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js',
    'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js',
    'node_modules/blueimp-file-upload/js/jquery.fileupload.js'
  ]
  return src(files).pipe(uglify())
                   .pipe(concat('jquery.fileupload.min.js'))
                   .pipe(dest('_vendor/'))
}