Как вывести разный HTML-код на dev и prod в Gulp?

Вы можете использовать пакет gulp-if для управления выполнением тасков в Gulp в зависимости от условия. Для этого вам нужно установить пакет gulp-if с помощью команды npm install gulp-if --save-dev.

После этого вы можете использовать gulp-if в своем gulpfile.js следующим образом:

const gulp = require('gulp');
const gulpif = require('gulp-if');
const concat = require('gulp-concat');

// Определим переменную окружения, которая будет равна 'production' на prod-версии
const env = process.env.NODE_ENV || 'development';

gulp.task('css', () => {
  return gulp.src(['assets/css/styles1.css', 'assets/css/styles2.css', 'assets/css/styles3.css'])
    // Если текущее окружение - 'production', то выполнить объединение файлов с помощью gulp-concat
    .pipe(gulpif(env === 'production', concat('all.css')))
    .pipe(gulp.dest('assets/css'));
});

В этом примере мы определили переменную окружения env, которая будет равна 'production' на prod-версии и 'development' на dev-версии. Затем мы используем gulp-if с условием env === 'production', чтобы выполнить объединение файлов с помощью gulp-concat только на prod-версии. На dev-версии файлы останутся необъединенными.

Обратите внимание, что в примере выше я использовал gulp.src для перечисления трех CSS-файлов, которые нужно обработать. Вы также можете использовать gulp.src с шаблоном, чтобы обработать все файлы в определенной папке. Например:

gulp.task('css', () => {
  return gulp.src('assets/css/*.css')
    // Если текущее окружение - 'production', то выполнить объединение файлов с помощью gulp-concat
    .pipe(gulpif(env === 'production', concat('all.css')))
    .pipe(gulp.dest('assets/css'));
});

В этом случае все CSS-файлы в папке assets/css будут обработаны таском css.

P.S Касательно подключения CSS-файлов к странице.

Один из способов реализовать это - это использовать таск gulp-inject для автоматической вставки тегов link в HTML-файл. Чтобы различать dev и prod, вы можете использовать тот же подход, что и с gulp-if.

const gulp = require('gulp');
const gulpIf = require('gulp-if');
const inject = require('gulp-inject');

gulp.task('inject', function() {
  let sources;
  if (process.env.NODE_ENV === 'production') {
    sources = gulp.src('assets/css/all.css', {read: false});
  } else {
    sources = gulp.src(['assets/css/styles1.css', 'assets/css/styles2.css', 'assets/css/styles3.css'], {read: false});
  }

  const target = gulp.src('index.html');

  return target
    .pipe(inject(sources, {relative: true}))
    .pipe(gulp.dest('./'));
});

В этом коде мы проверяем, находимся ли мы в режиме production (переменная process.env.NODE_ENV). Если да, то мы указываем один css-файл all.css как источник, иначе мы указываем три файла. Затем мы считываем index.html и используем inject для вставки тегов link с указанными источниками. В конце мы сохраняем результат в тот же файл.

Таким образом, ваш таск в Gulp будет автоматически вставлять теги link с нужными css-файлами в зависимости от текущего режима (dev или prod).

Обратите внимание, что в этом примере я предполагаю, что ваш HTML-файл содержит тег head, и теги link должны быть вставлены внутри него. Если ваш HTML