Как в gulp работать с несколькими html файлами?

@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 код.