half-life
@half-life

Смесь из gulp-jade, jinja2, angularjs Как всё это настроить?

Здравствуйте. Нужно писать темплейты для джанги на джейде с использованием синтаксиса джинжи2 и ангуляра. Как настроить галп чтобы он выплёвывал в папку готовый джанго шаблон?
  • Вопрос задан
  • 1280 просмотров
Решения вопроса 1
@rysev-a
Скажу сразу, я не использую angular. Но думаю что если вы можете использовать jade + angular, то возможно вас заинтересует мой способ:

Вообще я не думаю, что это дурость. Это очень удобно - использовать gulp для верстки и python (django или flask) для разработки сайта.

Лично я использую pyjade для flask, а шаблоны jade настраиваю так, чтобы они использовались и при верстке и на flask одинаково. То есть фактически использую одинаковые шаблоны.

Когда я просто верстаю, то в файле gulpfile.js я добавляю следующее

gulp.task('jade', function() {
    var siteinfo = require('./siteinfo.json');
    gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
        .pipe(jade({
            pretty: true,
            data: siteinfo
        }))  // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
        .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(gulp.dest('./public/')) // Записываем собранные файлы
    .pipe(livereload(server)); // даем команду на перезагрузку страницы
});


и создаю файл siteinfo.json, это как аналог базы данных для верстки, например если у меня есть новости, я добавляю вот такое

{
    "news" : [
        {
            "img"     : "/img/news/001.jpg",
            "title"   : "QT-ITEMS - новый фреймворк или попытка найти теорию всего",
            "anons" : "Как известно, физики давно пытаются найти Теорию Всего, в рамках которой можно было бы объяснять все ",
            "date"    : "2 мая 2015    17:15"
        },        
        {
            "img"     : "/img/news/002.jpg",
            "title"   : "QT-ITEMS - новый фреймворк или попытка найти теорию всего",
            "anons" : "Как известно, физики давно пытаются найти Теорию Всего, в рамках которой можно было бы объяснять все ",
            "date"    : "2 мая 2015    17:15"
        }
    ]
}


а в шаблоне jade вывожу так

.news__block
  for item in news
    article.news__block__item
      a.news__block__item-img
        img(src="#{item.img}").news__block__item-img-src
      a.news__block__item-title #{item.title}
      .news__block__item-anons #{item.anons}
      .news__block__item-date  #{item.date}


Абсолютно такой же кусок кода я использую и для flask (или django) используя pyjade.
Только теперь информацию о новостях я получаю не из файла siteinfo.json, а из базы данных из модели News

(код для flask)
@app.route("/blog")
def news():
    news = News.query.all()
    return render_template('news.jade', news = news)


В итоге я практически не трачу кучу времени на интеграцию верстки из gulp в flask. Для изображений и прочих статических файлов путь одинаковый, потому что я запускаю flask на nginx+gunicorn и статические файлы отдаю с помощью nginx.

server {
  listen 80;
  server_name default;
  root /home/alex/air-sites/air-sites/static/public/;
  location / {
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    if (!-f $request_filename) {
      proxy_pass http://127.0.0.1:5000;
      break;
    }
  }
}


поэтому если я использую стили и скрипты, то они везде добавляются так

head
  ...
  link(href='/css/screen.css', type="text/css", rel="stylesheet")
  script(src='/js/index.js')


в общем я предлагаю вам не пытаться сделать из gulp сборщик шаблона jinja, а попробовать использовать jade когда верстаешь и pyjade на рабочем сайте
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы