更多gulp常用插件使用請訪問：gulp常用插件匯總
gulp-useref這是一款可以將HTML引用的多個CSS和JS合並起來，減小依賴的文件個數，從而減少瀏覽器發起的請求次數。gulp-useref根據注釋將HTML中需要合並壓縮的區塊找出來，對區塊內的所有文件進行合並。注意：它只負責合並，不負責壓縮！,如果需要做其他操作，可以配合gulp-if插件使用.
安裝
一鍵安裝不多解釋
npm install --save-dev gulp-useref
使用
以下示例將解析HTML中的構建塊，將其替換並傳遞這些文件。構建塊內的資產也將被串聯並通過流傳遞。
var gulp = require('gulp'),
useref = require('gulp-useref');
gulp.task('default', function () {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
帶有選項的使用：
var gulp = require('gulp'),
useref = require('gulp-useref');
gulp.task('default', function () {
return gulp.src('app/*.html')
.pipe(useref({ searchPath: '.tmp' }))
.pipe(gulp.dest('dist'));
});
如果要壓縮或執行其他一些修改，則可以使用 gulp-if 有條件地處理特定類型的資產。
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css');
gulp.task('html', function () {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('dist'));
});
上面是在 gulpfile.js 中的調用代碼，但是還需要在HTML寫一些代碼配合使用，下面我們就來看看在html中需要怎么配合使用。
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
type(鍵入): 可以是js，css或remove;remove將完全刪除構建塊，而不會生成文件alternate search path(替代搜索路徑):（可選）默認情況下，輸入文件是相對於已處理文件的。替代搜索路徑允許更改此路徑。該路徑還可以包含使用JSON大括號數組表示法（例如）從右到左處理的一系列路徑<!-- build:js({path1,path2}) js/lib.js -->。path: 優化文件的文件路徑，目標輸出parameters(參數): 應該添加到標簽中的其他參數
完整形式的示例如下所示：
<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>
生成的HTML將是：
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
API
useref（options [，transformStream1 [，transformStream2 [，...]]]）
返回一個流，其中包含資產替換后的結果HTML文件以及來自HTML內部構建塊的串聯資產文件。支持 useref 的所有選項。
Transform Streams(轉換流)
類型：Stream
默認值：none
在合並之前轉換資產。例如，要集成源地圖：
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
useref = require('gulp-useref'),
lazypipe = require('lazypipe');
gulp.task('default', function () {
return gulp.src('index.html')
.pipe(useref({}, lazypipe().pipe(sourcemaps.init, { loadMaps: true })))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('dist'));
});
**Options **
- options.searchPath
類型：String或Array
默認值：none
指定相對於當前工作目錄搜索資產文件的位置。可以是字符串或字符串數組。 - options.base
類型：String
默認值：process.cwd()
指定相對於cwd的輸出文件夾。 - options.noAssets
類型：Boolean
默認值：false
跳過資產，僅處理HTML文件。 - options.noconcat
類型：Boolean
默認值：false
跳過串聯，而是將所有資產添加到流中。 - options.newLine
類型：String
默認值：none
添加應分隔串聯文件的字符串。 - options.additionalStreams
類型：Array<Stream>
默認值：none
使用其他流作為資產來源。有助於將gulp-useref與預處理工具結合使用。例如，與TypeScript一起使用
var ts = require('gulp-typescript');
// create stream of virtual files
var tsStream = gulp.src('src/**/*.ts')
.pipe(ts());
gulp.task('default', function () {
// use gulp-useref normally
return gulp.src('src/index.html')
.pipe(useref({ additionalStreams: [tsStream] }))
.pipe(gulp.dest('dist'));
});
- options.transformPath
類型：Function
默認值：none
如果需要在搜索之前修改路徑，請添加transformPath函數。
var gulp = require('gulp'),
useref = require('gulp-useref');
gulp.task('default', function () {
return gulp.src('app/*.html')
.pipe(useref({
transformPath: function(filePath) {
return filePath.replace('/rootpath','')
}
}))
.pipe(gulp.dest('dist'));
});