Как в 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 код.

@ottilie.farrell 

Также можно использовать плагин gulp-multi-dest, который позволяет сохранять файлы в несколько папок одновременно. Например, можно указать, что файлы index.html и about.html должны быть сохранены в папке dist, а файлы contact.html и blog.html должны быть сохранены в папке public:

1
2
3
4
5
6
7

const gulp = require('gulp');
const multiDest = require('gulp-multi-dest');

gulp.task('html', function() {
  return gulp.src(['src/index.html', 'src/about.html', 'src/contact.html', 'src/blog.html'])
    .pipe(multiDest(['dist', 'public']));
});

В данном примере мы указали, что файлы должны быть взяты из папки src и сохранены в папках dist и public. Путь к каждой папке указывается в виде массива.

Также можно использовать плагин gulp-ejs, который позволяет работать с шаблонами HTML и вставлять их в другие файлы. Например, можно создать отдельные шаблоны для шапки и подвала сайта, а затем использовать их для генерации каждой страницы сайта:

1
2
3
4
5
6
7
8

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

gulp.task('html', function() {
  return gulp.src('src/*.ejs')
    .pipe(ejs())
    .pipe(gulp.dest('dist'));
});

В данном примере мы указали, что нужно взять все файлы с расширением .ejs из папки src, применить плагин gulp-ejs, а затем сохранить результат в папке dist.

Выбор подходящего плагина зависит от ваших конкретных потребностей.