css - Django 管道、Heroku 和 SASS

Question

我一直在尝试设置django-pipeline，以便编译和连接我的资产。我还想从我的存储库中删除已编译的 css 文件，以避免拉取请求中的合并冲突。

我一直在尝试让 django-pipeline 编译文件作为部署过程的一部分，但无法弄清楚这一点。我使用 SASS 编写我的 CSS。我的管道设置如下所示：

STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'

PIPELINE_CSS = {
    'main': {
        'source_filenames': (
            'sass/blah.scss',
            'sass/main.scss',
        ),
        'output_filename': 'css/main.css',
        'extra_context': {
            'media': 'screen',
        },
    },
}

PIPELINE_COMPILERS = (
  'pipeline.compilers.sass.SASSCompiler',
)

这在本地工作得很好，并在我的 /sass 文件夹中生成 .css 文件，然后将它们组合成 main.css 文件。如果我将这些 CSS 文件检入我的 git 存储库并推送到 Heroku，它也可以正常工作。但是，如果我忽略它们，我想这样做以便我不提交已编译的文件，那么 django-pipeline 找不到要组合的文件。我不确定如何让 sass 编译在 Heroku 上运行，我找不到任何关于它的信息。

如果需要，我可以提供有关我的设置的更多信息，希望有人对此有所了解！

score 9 · Accepted Answer

好的，这就是我使用Compass编译我的 SASS 文件的方法。

使用多个 Heroku buildpacks - Heroku Buildpack Multi

将以下内容放入您的 .buildpacks 文件中

https://github.com/heroku/heroku-buildpack-ruby.git
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-python.git

使用指南针和您有的任何其他要求创建一个 Gemfile。这是我的：
```
source 'https://rubygems.org'

ruby '1.9.3'

gem 'bootstrap-sass'
gem 'compass'
```

创建一个 config.rb 文件。这是我的。如您所见，需要我在 Gemfile 中包含的 bootstrap-sass：

# Require any additional compass plugins here.
require 'bootstrap-sass'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "app_folder/static/css"
sass_dir = "app_folder/static/sass"
images_dir = "app_folder/static/images"

output_style = :compact

可以在此处找到有关 config.rb 的更多详细信息

安装节点包（django-pipeline 想要 yuglify）。你需要一个 package.json 文件：

{
  "dependencies": {
    "yuglify": "0.1.4"
  },
  "engines": {
    "node": "0.10.x",
    "npm": "1.3.x"
  },
  "repository": {
    "type": "git",
    "url": "your repo url"
  }
}

马上就好了...
当 Heroku 运行 ruby buildpack 时，它会寻找一个名为 assets:precompile 的 rake 任务。所以现在你需要添加一个带有以下内容的 Rakefile：
```
namespace 'assets' do
  desc 'Updates the stylesheets generated by Sass/Compass'
  task :precompile do
    print %x(compass compile --time)
  end
end
```
这将编译你的样式表。您需要确保将输出（回到 config.rb 中）设置为 django-pipeline 正在查找 CSS 文件的位置（如原始问题所示）。
您应该摆脱原始问题中的这一部分，因为 django-pipeline 没有为您编译您的 SASS：
```
PIPELINE_COMPILERS = (
  'pipeline.compilers.sass.SASSCompiler',
)
```
应该是这样！部署现在应该可以工作了，它并没有真正为我的部署过程增加大量时间。

总而言之，这相当于很多设置，但对我来说这是非常值得的，因为我不再需要将编译后的文件提交到存储库中，这在处理分支和拉取请求时会导致很多合并冲突。

我想弄清楚如何只使用两个构建包来做到这一点（显然只有一个是理想的，但我不知道这是否可能）。问题是试图找到二进制路径，以便管道在找不到默认值时可以做到这一点。我不确定我不能这样做的原因是因为 Heroku 是如何安装东西的，还是因为 django-pipeline 中存在错误，但现在这对我来说已经足够了。

如果您尝试此操作但对您不起作用，请告诉我，如果我错过了某些内容，我很乐意进行更新。

score 5 · Accepted Answer

我不想放弃您出色的解决方案，但我今天尝试了这个并发现了一些让事情变得更简单的差异 - 可能是由于 django-pipeline 和/或 Heroku 的更新。我的完整解决方案如下，以防其他人来看。

将 3 个构建包添加到 Heroku：

heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby.git
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-python.git

将 django-pipeline 和 django-pipeline-compass 添加到requirements.txt：

django-pipeline==1.5.2
django-pipeline-compass==0.1.5

创建一个Gemfile来安装 Sass：

source 'https://rubygems.org'
ruby '2.1.5'
gem 'bootstrap-sass'

创建一个package.json文件来安装 Yuglify：

{
  "dependencies": {
    "yuglify": "0.1.4"
  },
  "engines": {
    "node": "0.10.x",
    "npm": "1.4.x"
  }
}

我不需要Rakefile或config.rb。

作为参考，以下是我的settings.py中的相关设置：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '_generated_media')
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'

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

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'pipeline.finders.PipelineFinder',
)

PIPELINE_COMPILERS = (
    'pipeline_compass.compiler.CompassCompiler',
)

PIPELINE_YUGLIFY_BINARY = os.path.join(BASE_DIR, 'node_modules', '.bin', 'yuglify')

而且我还必须将此条目添加到urls.py：

url(r'^static/(?P<path>.*)$', serve, kwargs={'document_root': settings.STATIC_ROOT})

希望它可以帮助某人！

score 0 · Accepted Answer

您可能需要进行设置PIPELINE_SASS_BINARY，以便 django-pipeline 可以找到您的 SASS 编译器。

score 0 · Accepted Answer

您可以将libsass 编译器用于将 Sass 打包为 Python 包的 django-pipeline：

pip install libsasscompiler

更新您的配置：

PIPELINE['COMPILERS'] = (
  'libsasscompiler.LibSassCompiler',
)

默认的 Yuglify 压缩器也是 Heroku 上的一个问题，您可以通过禁用它来暂时解决这个问题。这是我在 Django 上启用 Sass 的配置，例如：

PIPELINE = {
    'COMPILERS': (
        'libsasscompiler.LibSassCompiler',
    ),
    'STYLESHEETS': {
        'main': {
            'source_filenames': (
              'styles/main.scss',
            ),
            'output_filename': 'css/main.css'
        },
    },
    # disable the default Yuglify compressor not available on Heroku
    'CSS_COMPRESSOR': 'pipeline.compressors.NoopCompressor',
    'JS_COMPRESSOR': 'pipeline.compressors.NoopCompressor'
}

长期的解决方案是转向仅 JS 的构建工具链（正如大多数项目所做的那样）。例如，Rails与 Webpack很好地集成，并由同一团队维护。在 Django 中发生这种情况（如果有的话）并滴入 Heroku Python 构建包之前，您可以使用 Heroku 的多个构建包并添加一个为您运行的官方 Node 构建包步骤npm install; npm run build。

css - Django 管道、Heroku 和 SASS

4 回答 4

Related

Reference