使用useref合并html中零散的js和css文件

最新推荐文章于 2025-06-13 17:24:14 发布

原创最新推荐文章于 2025-06-13 17:24:14 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

gulp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用gulp-useref插件自动合并前端HTML中的CSS和JS文件，通过配置gulp任务，实现资源文件的自动化打包，提高前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：

$ npm install gulp-useref --save-dev

使用：

var gulp = require('gulp');
var useref = require(‘gulp-useref‘);

gulp.task(‘useref‘, function(){
  return gulp.src(‘app/*.html‘)
        .pipe(useref())
        .pipe(gulp.dest(‘dist‘));
});

在html中需要指明合并后的文件例如：

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

<!-- The resulting HTML would be: -->
<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>