Для добавления класса в HTML при импорте с использованием Gulp и плагина gulp-file-include, вам потребуется следующая процедура:
1. Установите Gulp и gulp-file-include:
Установите Gulp глобально (если у вас его еще нет) с помощью следующей команды в командной строке или терминале:
npm install -g gulp
Установите плагин gulp-file-include локально в ваш проект:
npm install --save-dev gulp gulp-file-include
2. Создайте файлы:
Создайте файлы исходного кода HTML с расширением .html и сохраните их в нужном вам месте в вашем проекте. Например, создайте файл index.html и в него добавьте следующую строку:
<!--= include partial.html class="my-class" -->
В данном примере, partial.html является частью общего шаблона, а my-class - классом, который вы хотите добавить к элементу при его импорте.
3. Создайте файл gulpfile.js:
Создайте файл с именем gulpfile.js в корневой папке вашего проекта и добавьте в него следующий код:
const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
function include() {
return gulp.src('src/*.html') // Путь к исходным файлам HTML
.pipe(fileinclude({
prefix: '<!--=',
suffix: ' -->',
context: {
class: 'my-class' // Укажите здесь класс, который вы хотите добавить
}
}))
.pipe(gulp.dest('dist')); // Путь к выходной папке
}
exports.include = include;
exports.default = gulp.series(include);
В данном примере, мы используем функцию include, которая берет все файлы с расширением .html из папки src, заменяет комментарий <!--= include partial.html class="my-class" --> на содержимое partial.html с классом my-class и сохраняет их в папку dist (выходная папка).
4. Запустите Gulp:
Запустите Gulp в командной строке или терминале в корневой папке вашего проекта выполнением следующей команды:
gulp
Это запустит задачу по умолчанию, которая включает функцию include. В результате, все файлы .html из папки src будут обрабатываться плагином gulp-file-include и класс my-class будет добавлен там, где указан комментарий <!--= include partial.html class="my-class" -->.
5. Проверьте результат:
После успешного выполнения Gulp-задачи, вы найдете обновленные файлы .html в папке dist с добавленным классом my-class.
Вот и все! Теперь у вас есть класс, который добавляется в HTML при импорте с использованием Gulp и плагина gulp-file-include.