更多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 (键入): 可以是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'));

});

gulp常用插件之gulp-useref使用的更多相关文章

  1. 精通gulp常用插件

    本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...

  2. gulp常用插件之gulp-rev-collector使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. ...

  3. node和gulp实现前端工程自动化(附：gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  4. gulp常用插件之gulp-eslint使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...

  5. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

  6. gulp常用插件之gulp-postcss使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...

  7. gulp常用插件之cssnano使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...

  8. gulp常用插件之pump使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...

  9. gulp常用插件之gulp-notify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...

随机推荐

  1. Xamarin.Forms 二维码扫描实践

    开发环境: Visual Studio 2019 版本 16.4.5 公用平台nuget ZXing.Net.Mobile.Forms 2.4.1 Plugin.Permissions 5.0.0-b ...

  2. Coroutine 终止协程和异常处理

    终止协程和异常处理 协程中未处理的异常会向上冒泡,传给 next 函数或 send 方法的调用方(即触发协程的对象) 终止协程的一种方式:发送某个哨符值,让协程退出.内置的 None 和 Ellips ...

  3. 仅仅知道如何终止XHR请求，或许对你来说是不够的！

    TLDR: 当我们需要的时候,我们可以通过AbortController接口来终止一个或者多个请求. 前言 到目前为止,我们有两个常用的基本的手段去发送请求进而局部刷新页面内容,其一是XMR(XMLH ...

  4. 记一次IE浏览器做图片预览的坑

    随便写写吧,被坑死了 IE 10 及 IE10以上,可以使用FileReader的方式,来做图片预览,加载本地图片显示 IE 9 8 7 没有FileReader这个对象,所以只能使用微软自己的东西来 ...

  5. Keepalived 工作原理和配置说明

    keepalived是什么: 简单来说 Keepalived 的功能功能1.使用VRRP协议 来控制一组高可用(HA) 主备系统,一台master工作,一台slave热备:master失效后slave ...

  6. 学习shiro最佳实践，绝对正确

    按照https://blog.csdn.net/qq_34021712/column/info/26947学习,基本能解决shiro一切问题,谢谢该博主

  7. Windows2008R2搭建共享存储服务器

    说明: 为了方便公司个部门软件.项目.文档等资料的归档和保存,实现公司内部资料共享及重要资料备份,防止因个人计算机系统故障或硬件故障导致数据丢失而造成数据无法恢复的损失,特建立共享服务器 1.在共享服 ...

  8. 将jsp页面转化为图片或pdf（一）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...

  9. Java @Deprecated Annotation（注解）

    在本部分的快速指南中,我们将会查看 Java 的 deprecated API 和如何在程序中使用 @Deprecated 注解. @Deprecated Annotation(注解) 作为程序的进化 ...

  10. Centos7 使用Docker 部署mssql 2017

    mssql是.NET的标配,一般使用.NET的人基本都用mssql. 以前mssql只能支持windows平台,从微软打出 拥抱开源 的口号开始,mssql的2017 版本,开始支持linux系统. ...