HelpSophie

Про стили не понял, а стрелки... Встречный вопрос - почему они должны убираться? Вы эти элементы создали - сами и решайте, что с ними делать. Например, можно их показывать/прятать при создании/уничтожении слайдера. После инициализации/дестроя у контейнера переключается класс swiper-container-initialized, можно назначать нужные стили в зависимости от его наличия:

.swiper-container:not(.swiper-container-initialized) {
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none;
  }
}

Но таск не перестал запускаться как Starting 'anonymous'...

Потому что функция анонимная.

const html = (lang) => {  // (1)
// 1 - первый вызов происходит, когда вы подключаете таску и передаете ей свои аргументы.
  return () => { // (2)
// 2- эта функция возвращается после передачи аргументов
// и вызывается, когда вы таску запускаете.
// как видите, у нее нет имени.
    return gulp.src("source/*.njk")
      .pipe(rename({suffix: lang}))
      .pipe(gulp.dest("build"));
  };
}
exports.html = html;

const html = (lang) => {
// объявляем функцию
  const html = () => {
    return gulp.src("source/*.njk")
      .pipe(rename({suffix: lang}))
      .pipe(gulp.dest("build"));
  };
  return html;
}
exports.html = html;

Вот здесь https://www.npmjs.com/package/gulp-data
Первый же пример "Get data via JSON file, keyed on filename."

Цель: Чтобы на github не пушилась папка .idea

Сделайте глобальный системный .gitignore.

Лучше фоновое изображение засунуть в svg и сделать маску.
Либо так:
(с пропорциональным увеличением)

либо:
(с фиксированной высотой)

Также с помощью медиа-запросов можно совместить оба эти варианта

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

Прямо во время вывода и выводить их в свои места. Это явный двумерный массив. Который ты спокойно выведешь, как только поймешь, как с ним работать. Если быть точнее, двумерная проходка, к двумерному массиву можно и стоило бы привести для сортировки.

Приведу грубый пример на псевдокоде:

cols1 = []
cols2 = []
cols3 = []

for(i = 0; i < x; i++) { // Где x = размер самого большого массива
for(j = 0; j < 3; j++) { // Потому что колонок 3
if j == 0:
     print(cols1[i])
...

Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.

grid: auto-flow dense / repeat(3, 100px);

Если отключить svgo, то

const configSVG = {
  transform: [],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

Если сконфигурировать svgo, то

const configSVG = {
  transform: [{svgo: {
    js2svg: {pretty: true}, // Отключаем минификацию svg.
    plugins: [
      {cleanupListOfValues: {floatPrecision: 0}},
      {inlineStyles: {onlyMatchedOnce: false}},
      {removeAttrs: {attrs: ['stroke', 'data-name']}},
      {removeAttributesBySelector: {selector: ':not([fill="none"])', attributes: ['fill']}}
    ]
  }}],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

По конфигу svgo https://github.com/svg/svgo#what-it-can-do

Может в phpstorm и есть что-то более магическое, но универсальное решение для любых нормальных редакторов: регулярное выражение:
<svg [\s\S]*?</svg>
Конкретно в phpStorm:
1. Ctrl(+Shift)+R;
2. галочку на Regexp;
3. Replace all.

Вообще регулярные выражения рекомендуется изучить - вещь незаменимая и очень упрощающая работу с любым текстом. И не смотрите что они страшные на вид: писать их гораздо легче чем читать.)

param = !param

Вырезаете selectedProducts, вместо него используете в v-model свойства checked элементов products. Отключить чекбокс - свойства disabled у вас уже есть, просто привяжите их значения к чекбоксам.

<input
  type="checkbox"
  v-model="product.checked"
  :disabled="product.disabled"
>

Ну и в отсутствие selectedProducts следует переписать вычисляемое свойство totalPrice:

computed: {
  totalPrice() {
    return this.products.reduce((acc, n) => acc + n.checked * n.price, 0);
  },
},

В таком духе, через computed с привязкой к v-model="product.checked"
https://jsfiddle.net/fg63dc1r/

Super Auto Refresh Plus и куча других доступных в chrome extension.

Делаем временную ветку temp1 и пушим туда все что угодно.
Потом, когда закончим пилить фичу, переключаемся обратно на master или dev и делаем
git merge --squash temp1
Все изменения перекочуют в master/dev, но не будут закоммичены.
Теперь можно делать обычный коммит с описанием фичи, все будет в одном коммите.
После всего удаляем временную ветку с ключом --force

Временную ветку лучше назвать как-то более понятно, чем temp1, если работаете не одна. feat-super-puper.

Используйте полноценные шаблонизаторы, а не всякие суррогаты.
Например twig (gulp-twig для верстки)

{% if some_variable == 2 %}
  {% include "file1.twig" %}
{% else %}
  {% include "file2.twig" %}
{% endif %}

UPD
Почитал комменты. Twig это что называется like html шаблонизатор. Т.е. обычный html файл скормленный шаблонизатору не вызовет ошибок компиляции. Это значит, что вы можете по сути в свой html просто вставлять управляющие конструкции шаблонизатора.

Не писать же 4 условия?

Можно использовать регулярное выражение:

if ($parent[0].tagName == 'A' && (/\.(gif|jpg|webp|png)$/i).test($parent.attr('href'))) {
  // do something
}

И как определить, что это не внешняя ссылка?

function getDomain(url) {
  return url.replace('http://','').replace('https://','').split('/')[0];
}

function isExternal(url) {
  return getDomain(location.href) !== getDomain(url);
}

if (isExternal($parent.attr('href')) {
  // do something
}