В Gulp.js существует несколько способов очистки HTML кода от строк подключения скриптов и стилей после их объединения в одиночные файлы. Один из самых популярных и распространенных способов - использование плагина Gulp-Useref.
Шаг 1: Установка плагина Gulp-Useref
Перед использованием плагина Gulp-Useref, вам необходимо установить его с помощью вашего менеджера пакетов (например, npm):
npm install gulp-useref --save-dev
Шаг 2: Подключение плагина Gulp-Useref
После установки плагина, вы можете подключить его в вашем Gulpfile.js следующим образом:
const gulp = require('gulp');
const useref = require('gulp-useref');
gulp.task('html', function () {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
Здесь мы создали задачу "html", которая обрабатывает все файлы с расширением .html из папки "src".
Шаг 3: Использование комментариев в HTML файле
Ваш HTML файл должен содержать специальные комментарии, которые указывают на то, какие файлы объединяются. Например:
<!DOCTYPE html>
<html>
<head>
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/style1.css">
<link rel="stylesheet" href="css/style2.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js js/main.js -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<!-- endbuild -->
</body>
</html>
Комментарии "build:css" и "build:js" указывают на начало и конец области, которая будет объединена в один файл. После выполнения задачи "html", все строки подключения стилей и скриптов будут удалены из HTML файла, а объединенные файлы будут сохранены в папке "dist" (которую мы указали в методе gulp.dest).
Шаг 4: Запуск задачи
Запустите задачу командой gulp html в командной строке. После успешного выполнения, вы найдете измененные HTML файлы без строк подключения стилей и скриптов в папке "dist".
Конечно, Gulp-Useref - не единственный способ решения данной задачи. В Gulp существуют и другие плагины для обработки HTML файлов, такие как Gulp-HTMLmin, Gulp-Inline-Src и другие. Выбор конкретного инструмента зависит от требований вашего проекта и вашего стиля работы.