gulp常用插件之gulp-useref使用

更多gulp常用插件使用请访问:gulp常用插件汇总


gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并。注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if插件使用.

更多使用文档请点击访问gulp-useref工具官网

安装

一键安装不多解释

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 (键入): 可以是jscssremove ; 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
    类型:StringArray
    默认值: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'));
});

相关推荐