gulp經常使用插件之gulp-useref使用

時間 2019-12-16

原文原文鏈接

更多gulp經常使用插件使用請訪問：gulp經常使用插件彙總javascript

gulp-useref這是一款能夠將HTML引用的多個CSS和JS合併起來，減少依賴的文件個數，從而減小瀏覽器發起的請求次數。gulp-useref根據註釋將HTML中須要合併壓縮的區塊找出來，對區塊內的全部文件進行合併。注意：它只負責合併，不負責壓縮！,若是須要作其餘操做，能夠配合gulp-if插件使用.css

更多使用文檔請點擊訪問gulp-useref工具官網。html

安裝

一鍵安裝很少解釋java

npm install --save-dev gulp-useref

使用

如下示例將解析HTML中的構建塊，將其替換並傳遞這些文件。構建塊內的資產也將被串聯並經過流傳遞。typescript

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

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

帶有選項的使用：npm

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 有條件地處理特定類型的資產。gulp

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中須要怎麼配合使用。api

<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

type (鍵入): 能夠是js ，css 或remove ; remove 將徹底刪除構建塊，而不會生成文件
alternate search path (替代搜索路徑):（可選）默認狀況下，輸入文件是相對於已處理文件的。替代搜索路徑容許更改此路徑。該路徑還能夠包含使用JSON大括號數組表示法（例如）從右到左處理的一系列路徑。
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'));
});