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

Пользователь

от ottilie.farrell , в категории: Другие , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от miguel_ritchie , 7 месяцев назад

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