在前端開發中，優化網站性能是一個重要的任務。縮減HTML的文件大小是其中的一種優化方式。Gulp作為一款優秀的構建工具，提供了許多插件來幫助我們壓縮HTML代碼。

首先，我們需要安裝gulp-htmlmin插件：

npm install --save-dev gulp-htmlmin

然后，我們可以在gulpfile.js中配置HTML壓縮任務：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('minify-html', () =>{
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});

如上代碼中，我們使用gulp.src方法選擇了src文件夾中所有的HTML文件。然后，我們使用gulp-htmlmin插件提供的API來執行實際的壓縮工作。通過傳遞一個配置對象，我們可以告訴插件壓縮HTML時需要刪除的空白符和其他不必要的元素。最后，我們使用gulp.dest方法將壓縮后的文件輸出到dist文件夾中。

在執行gulp minify-html命令之后，我們就可以看到經過壓縮后的HTML文件出現在dist目錄中。通過這樣的方式，我們可以更有效地利用帶寬資源，提升用戶體驗。