使用gulp useref如何添加额外的文件？

使用gulp useref可以将HTML文件中的注释块（注释块中包含了引用的CSS和JS文件路径）替换为对应的合并后的CSS和JS文件路径。如果需要在合并后的文件中添加额外的文件，可以按照以下步骤进行操作：

在HTML文件中，使用注释块指定需要合并的CSS和JS文件路径，例如：

<!-- build:css css/main.min.css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

<!-- build:js js/main.min.js -->
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

在gulpfile.js中，配置gulp任务，使用gulp-useref插件解析HTML文件中的注释块，并进行文件合并和替换，例如：

const gulp = require('gulp');
const useref = require('gulp-useref');
const gulpIf = require('gulp-if');
const uglify = require('gulp-uglify');
const cssnano = require('gulp-cssnano');

gulp.task('useref', function() {
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'));
});

如果需要在合并后的文件中添加额外的文件，可以在HTML文件中添加相应的标签，例如：

<!-- build:css css/main.min.css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/extra.css"> <!-- 添加额外的CSS文件 -->
<!-- endbuild -->

<!-- build:js js/main.min.js -->
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/extra.js"></script> <!-- 添加额外的JS文件 -->
<!-- endbuild -->