Трубопровод Джанго, Heroku и SASS

Я пытался настроить django-pipe, чтобы я мог скомпилировать и объединить мои ресурсы. Я также хотел бы удалить скомпилированные CSS-файлы из моего хранилища, чтобы избежать конфликтов слияния в запросах на извлечение.

Я пытался заставить django-pipe для компиляции файлов как часть процесса развертывания, но не могу понять это. Я использую 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',
)

Это прекрасно работает локально и генерирует файлы.css в папке my /sass, которые затем объединяются в файл main.css. Если я проверяю эти CSS-файлы в своем git-репозитории и отправляю их в Heroku, это также работает нормально. Однако, если я игнорирую их, что я хотел бы сделать, чтобы я не фиксировал скомпилированные файлы, тогда django-pipeline не может найти файлы для объединения. Я не уверен, как я могу заставить сборник sass работать над Heroku, и я ничего не могу найти по этому поводу.

Я могу предоставить больше информации о моей настройке, если нужно, надеюсь, кто-то знает что-нибудь об этом!

4 ответа

Решение

Хорошо, вот как мне это удалось, используя 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. Вот мой. Как вы можете видеть, требуется boottrap-sass, который я включил в свой Gemfile:

    # 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-pipel хочет 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, он ищет задачу rake, называемую assets: precompile. Так что теперь вам нужно добавить 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-pipe есть ошибка, но сейчас это достаточно хорошо для меня.

Если вы попробуете это, и у вас ничего не получится, дайте мне знать, если я что-то пропустил, я с удовольствием обновлюсь.

Я не хочу отказываться от вашего отличного решения, но я попробовал это сегодня и обнаружил несколько различий, которые упростили мне задачу - вероятно, из-за обновлений в django-pipe и / или 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 в файл require.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})

Надеюсь, это поможет кому-то!

Вы можете использовать компилятор libsass для django-конвейера, который использует Sass, упакованный как пакет Python:

pip install libsasscompiler

Обновите ваш конфиг:

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

Компрессор Yuglify по умолчанию также является проблемой в Heroku, которую можно временно устранить, отключив ее. Это мой конфиг для включения Sass на Django, например:

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 для тебя.

Вам может понадобиться установитьPIPELINE_SASS_BINARY так что django-pipe может найти ваш SASS-компилятор.

Другие вопросы по тегам