Как передать в gulp-pug данные или переменную?

В gulp-pug, чтобы передать данные или переменные, можно использовать модуль gulp-data и функцию data(). Давайте рассмотрим несколько примеров.

Передача данных из JSON файла:

const gulp = require('gulp');
const pug = require('gulp-pug');
const data = require('gulp-data');
const fs = require('fs');

gulp.task('pug', function() {
  return gulp.src('src/*.pug')
    .pipe(data(function() {
      return JSON.parse(fs.readFileSync('data/data.json'));
    }))
    .pipe(pug())
    .pipe(gulp.dest('dist'));
});

В этом примере мы используем модуль fs для чтения JSON файла, а затем передаем его как данные для pug-файлов.

Передача переменных напрямую:

const gulp = require('gulp');
const pug = require('gulp-pug');

gulp.task('pug', function() {
  return gulp.src('src/*.pug')
    .pipe(pug({
      locals: {
        title: 'My Website',
        description: 'This is my website'
      }
    }))
    .pipe(gulp.dest('dist'));
});

Здесь мы используем настройку locals, чтобы передать переменные непосредственно в компилятор pug.

Также можно использовать gulp-data вместе с gulp-rename, чтобы создать динамические файлы:

const gulp = require('gulp');
const pug = require('gulp-pug');
const data = require('gulp-data');
const rename = require('gulp-rename');

gulp.task('pug', function() {
  return gulp.src('src/*.pug')
    .pipe(data(function(file) {
      return {
        title: 'My Website',
        description: 'This is my website',
        filename: file.stem
      };
    }))
    .pipe(pug())
    .pipe(rename(function(path) {
      path.basename = path.data.filename;
    }))
    .pipe(gulp.dest('dist'));
});

В этом примере мы используем функцию data для передачи переменной filename, которая содержит имя файла без расширения. Затем мы используем gulp-rename, чтобы переименовать файлы с учетом этой переменной.

Надеюсь, это поможет вам передавать данные и переменные в gulp-pug!