使用gulp useref可以将HTML文件中的注释块(注释块中包含了引用的CSS和JS文件路径)替换为对应的合并后的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 -->
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'));
});
<!-- 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 -->
gulp useref
这样,gulp useref会将HTML文件中的注释块替换为合并后的CSS和JS文件路径,并将额外的文件添加到合并后的文件中。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云