【gulp】gulp压缩并抽取HTML代码中的公共代码

项目场景：

最近遇到的一个官网项目，其中涉及到对网页头部header.html文件和底部footer.html文件公共代码的提取。由于是刚接手的项目，之前有人已经直接修改打包生成的dist文件用于项目更新，以致于每涉及到修改像头部和尾部等公共文件，都需要对每个html文件进行复制粘贴。所以翻看之前的git提交记录，准备重新把公共提取使用起来，减轻开发负担。

解决方案：

看到源码中有个名为gulpfile.js的文件，想必是使用的gulp工具，该文件内容如下：

const gulp = require('gulp');
const fileinclude = require('gulp-file-include');

function handlefileinclude() {
    return gulp.src('./*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file',
            indent: true
        }))
        .pipe(gulp.dest('./dist'));
}
function handleCss() {
    return gulp.src('./styles/common.css').pipe(gulp.dest('./dist/styles'));
}
exports.default = function () {
    gulp.watch(
        ['./*.html', './styles/common.css', './include/**', '!./dist/**', '!node_modules/**'],
        gulp.parallel(handlefileinclude, handleCss)
    );
}

通过简单了解后，看到一篇文章完美解决：链接: https://blog.csdn.net/2301_76702774/article/

赞 玫瑰