Константин Величко

.pipe(pug({
	pretty: '\t'
}))

Вам никто не мешает использовать javascript

- var data = {categories: [{ link: "#cat1", name: "Категория1", },{ link: "#cat2", name: "Категория2", },{ link: "#cat3", name: "Категория3", },{ link: "#cat4", name: "Категория4", },{ link: "#cat5", name: "Категория5", },{ link: "#cat6", name: "Категория6", },{ link: "#cat7", name: "Категория7", },{ link: "#cat8", name: "Категория8", },{ link: "#cat9", name: "Категория9" }]};

- var categories;
- while (data.categories.length > 0)
  - categories = data.categories.splice(0,4);
  ul
    each category in categories
      li: a(href=category.link)= category.name

codepen.io/Zoxon/pen/GNZNWr?editors=1000

У меня тоже раньше была такая проблема. На сколько я смог разобраться в этом виноват gulp.
Пришлось заменить gulp.watch на gulp-watch и использовать run-sequence
Сам таск
Watch к нему

1. Я использую миксины чтобы не было каши. Миксины могут использовать другие миксины (Пример: https://github.com/zoxon/gulp-front)
2. Выделяете и жмете Shift + Tab

- var data = { "items" : [ { "articles": [ { "title": "Заголовок 2", }, { "title": "Заголовок 1" }  ] }  ] };

p= data.items[0].articles[0].title

А вообще обычно такие данные выводятся циклами

Используйте миксины данные в виде массива объектов
Если меню фиксированной вложенности можно сделать так

mixin main-menu-submenu(data)
	ul.main-menu-submenu&attributes(attributes)
		each item in data
			li.main-menu-submenu__item
				a(href="#{item.url}")= item.title


mixin main-menu(data)
	nav.main-menu.js-link-sroll&attributes(attributes)
		ul
			each item in data
				- var itemClasses = ['main-menu__item']
				//- Доп класс для пунктов с подменю
				if (item.submenu !== false)
					- itemClasses.push(itemClasses[0] + '_dropdown')

				li(class=itemClasses)
					a(href="#{item.url}").main-menu__link= item.title
					if (item.submenu !== false)
						.main-menu__submenu
							+main-menu-submenu(item.submenu)

И примерно такой структурой данных

{
	"menu": [
		{
			"title": "Level 1 title 1",
			"url": "#url1",
			"submenu": [
				{
					"title": "Submenu item 1",
					"url": "url2"
				},
				{
					"title": "Submenu item 2",
					"url": "url3"
				}
			]
		},
		{
			"title": "Level 1 title 2",
			"url": "#url4",
			"submenu": false
		}
	]
}

Если неизвестна максимальная вложенность то можно использовать рекурсию
Как написать mixin для Jade/Pug?

[{name:"Acura",img:"img/marks/acura.png", "id": "my-id1"},{name:"Alfa Romeo",img:"img/marks/alfaromeo.png", "id": "my-id2"}]

a(href="#" id="##{names.id}").marks-item

Либо использовать index

each names, index in [...]
a(href="#" id="#my-id#{index}").marks-item

У меня все миксинами. Есть модули это вроде строительных блоков, а есть страницы это место в котором я из них собираю страницу
https://github.com/zoxon/gulp-front

Рекурсия
codepen.io/Zoxon/pen/zBPBbW?editors=1000#0

{
	"title": "Title text",
	"items": [
		{
			"title": "Item 1"
		},
		{
			"title": "Item 2",
			"sublevel": true,
			"items": [
				{
					"title": "Item 2.1"
				},
				{
					"title": "Item 2.2"
				},
				{
					"title": "Item 2.2",
					"sublevel": true,
					"items": [
						{
							"title": "Item 2.2.1",
							"sublevel": true,
							"items": [
								{
									"title": "Item 2.2.2.1"
								},
								{
									"title": "Item 2.2.2.2"
								},
								{
									"title": "Item 2.2.2.3"
								}
							]
						},
						{
							"title": "Item 2.2.2"
						},
						{
							"title": "Item 2.2.3"
						}
					]
				}
			]
		},
		{
			"title": "Item 3"
		}
	]
}

mixin list(data)
	ul
		each item in data.items
			li= item.title
				if item.sublevel
					+list(item)

Можно вообще убрать sublevel и делать проверку на вложенный items