Django 管道、Heroku 和 SASS答案

【问题标题】：Django Pipeline, Heroku, and SASSDjango 管道、Heroku 和 SASS
【发布时间】：2014-01-12 04:58:44
【问题描述】：

我一直在尝试设置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 上运行，我找不到任何关于它的信息。

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

【问题讨论】：

标签： css django heroku sass django-pipeline

【解决方案1】：

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

使用多个 Heroku 构建包 - 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

more details on config.rb can be found here

安装节点包（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 中存在错误，但现在这对我来说已经足够了。

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

【讨论】：

我在尝试让django-compressor 在 Heroku 上编译 Zurb Foundation scss 时发现了这个回复，并以此为指导让它工作！在我的情况下，由于不需要 node.js 包，因此可以只在 multi-buildpack 中引入 ruby 和 python。 Gemfile 只需要里面有 sass，然后就不需要 rake 或者 config.rb 了。 Heroku 将构建 sass gem，然后像 ('text/x-scss', 'sass --scss {infile} {outfile}'), 这样的 django-compressor 预编译器语句将起作用。感谢您提供有关在管道中执行此操作的有用指导！
我还必须添加 Gemfile.lock

【解决方案2】：

我不想放弃您出色的解决方案，但我今天尝试了这个并发现了一些让事情变得更简单的差异 - 可能是由于 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})

希望对某人有所帮助！

【讨论】：

谢谢，我只需要sass 可执行文件，所以添加一个Gemfile、Gemfile.lock 和ruby 构建包让我可以在heroku 上启动并运行django-static-precompiler。

【解决方案3】：

您可能需要set PIPELINE_SASS_BINARY 以便 django-pipeline 可以找到您的 SASS 编译器。

【讨论】：

这可能是解决方案的一部分。部分问题仍然是在 Heroku 上安装一个 sass 编译器并找出它的路径。
我找到了一个使用多个 buildpack 的解决方案，因此您可以使用 ruby buildpack 安装 sass gem，然后管道编译器将自动获取它的位置。稍后我会更新完整的回复。
我自己回来链接这个...最好包含指向heroku-buildpack-multi的链接，因为我的剪贴板上有它。

【解决方案4】：

您可以将libsass compiler 用于将 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 很好地集成了with Webpack，并由同一团队维护。在 Django 中发生这种情况（如果有的话）并滴入 Heroku Python 构建包之前，您可以使用 Heroku 的 multiple buildpacks 并添加一个为您运行 npm install; npm run build 的官方 Node 构建包步骤。

【讨论】：