A mixture of gulp-jade, jinja2, angularjs How to set it all up?

Question

Django

Hello. You need to write templates for dzhangi in jade using the dzhinzhi2 syntax and angular. How to configure galp to spit out a ready-made django template into a folder?

Answer 1

I will say right away, I do not use angular. But I think that if you can use jade + angular, then you might be interested in my way:
Actually, I don't think it's stupid. It is very convenient to use gulp for layout and python (django or flask) for site development.
Personally, I use pyjade for flask, and I set up jade templates so that they are used both in layout and in flask in the same way. That is, in fact, I use the same templates.
When I just typeset, then in the gulpfile.js file I add the following

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)); // даем команду на перезагрузку страницы
});

and create a siteinfo.json file, it's like an analogue of a database for layout, for example, if I have news, I add this

{
    "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"
        }
    ]
}

and in the jade template I output it like this

.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}

I use exactly the same piece of code for flask (or django) using pyjade.
Only now I get news information not from the siteinfo.json file, but from the database from the News model
(code for flask)

@app.route("/blog")
def news():
    news = News.query.all()
    return render_template('news.jade', news = news)

As a result, I practically do not spend a lot of time integrating layout from gulp into flask. For images and other static files, the path is the same, because I run flask on nginx + gunicorn and serve static files using 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;
    }
  }
}

so if I use styles and scripts, they are added everywhere like this

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

in general, I suggest that you do not try to make a jinja template collector out of gulp, but try using jade when you typeset and pyjade on a production site