Django Pipeline，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',
)

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

如果需要，我可以提供有关我的设置的更多信息，希望有人知道这件事！

Answer 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 

  有关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', ) 

• 那应该是它！ 部署应该现在正常工作，并没有真正为我的部署过程增加大量时间。

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

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

如果您尝试这个并且它对您不起作用，请告诉我，如果我遗漏了一些内容，我很乐意进行更新。

Answer 2

我不想从你的优秀解决方案中拿走，但我今天尝试了这一点并发现了一些让我更简单的差异 - 可能是由于django-pipeline和/或Heroku的更新。 我的完整解决方案如下，万一其他人来看。

将3个buildpack添加到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})

希望它可以帮到某人！

Answer 3

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

Answer 4

您可以将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的多个构建包并添加运行npm install; npm run build的官方Node buildpack步骤npm install; npm run build npm install; npm run build为你npm install; npm run build 。