您的位置：首页 > Web前端 > JavaScript

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

2017-03-10 00:15 696 查看

安装：

$ 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>

执行gulp任务后将在dist目录下生成两个目录，分别是css和js。在css目录下存放着combined.css ，js目录下存放着combined.js。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航