Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (2)

Наибольший вклад в теги

Все теги (10)

Лучшие ответы пользователя

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

    @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 на рабочем сайте
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (8)