使用useref合併html中零散的js和css檔案
阿新 • • 發佈:2019-02-12
安裝:
$ 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。