@ottilie.farrell
Для работы с несколькими HTML файлами в Gulp существует несколько способов.
Один из способов - использовать плагин gulp-file-include. Он позволяет вставлять один HTML файл в другой. Например, можно создать отдельные файлы для шапки и подвала сайта, а затем вставить их в каждую страницу сайта.
Для использования gulp-file-include, нужно установить его через npm:
1
|
npm install gulp-file-include --save-dev |
Затем добавить следующий код в файл gulpfile.js:
1 2 3 4 5 6 7 8 9 10 11 |
const gulp = require('gulp'); const fileinclude = require('gulp-file-include'); gulp.task('html', function() { return gulp.src('src/*.html') .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); }); |
В данном примере мы указали, что нужно взять все файлы с расширением .html из папки src, применить плагин gulp-file-include, а затем сохранить результат в папке dist.
Еще один способ - использовать плагин gulp-htmlmin, который позволяет минимизировать HTML код. Например, можно создать отдельную задачу для минимизации HTML кода всех файлов в папке src:
1 2 3 4 5 6 7 8 |
const gulp = require('gulp'); const htmlmin = require('gulp-htmlmin'); gulp.task('html', function() { return gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('dist')); }); |
В данном примере мы указали, что нужно взять все файлы с расширением .html из папки src, применить плагин gulp-htmlmin, а затем сохранить результат в папке dist.
Независимо от выбранного способа, для работы с несколькими HTML файлами в Gulp нужно использовать плагины, которые позволяют обрабатывать HTML код.