В 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!