更多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. Decorator - 装饰器

    装饰器 Decorator, 先来看看对 decorator 这个名词的解释, 一个可调用的对象 A (decorator), 返回另一个可调用的对象 B, 在可调用的对象 C 的定义体之前通过语法 ...

  2. 兄弟连 企业shell笔试题 16-31

    企业实践题16:企业案例:写网络服务独立进程模式下rsync的系统启动脚本 例如:/etc/init.d/rsyncd{start|stop|restart} .要求:1.要使用系统函数库技巧.2.要 ...

  3. python-nmap 使用

    安装 [root@localhost ~]# yum -y install nmap [root@localhost ~]# pip install python-nmap 使用 import nma ...

  4. [MacOS]MacOS字体文件位置

    $ cd /System/Library/Fonts $ ls Apple Braille Outline 6 Dot.ttf Noteworthy.ttc SFCompactText-Regular ...

  5. Linux监控-历史细项数据回溯

    Linux监控数据回溯 网络服务监控 应用场景: lvs 后端内网端机器网络波动监控: nginx 80.443端口连接监控: mysql 连接监控 以上为抛砖引玉,根据环境安装到监控工具(open ...

  6. matlab---设置背景颜色为白色

    (1)每次设置figure('color','w');或者figure('color',[1 1 1])或者set(gcf,'color','w'); (2)一次性:在命令行内输入 set(0,'de ...

  7. pikachu-跨站请求伪造（CSRF）

    一.CSRF漏洞概述 1.1 什么是CSRF漏洞 在CSRF的攻击场景中攻击者会伪造一个请求(整个请求一般是一个链接),然后七篇目标用户进行点击,用户一旦点击了这个请求,整个攻击也就完成了,所以CSR ...

  8. leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  9. mysql必知必会-创建高级联结

    使用表别名 使用别名引用被检索的表列 别名除了用于列名和计算字段外,SQL还允许给表名起别名.这样做 有两个主要理由: 缩短SQL语句: 允许在单条 SELECT 语句中多次使用相同的表. 可以看到, ...

  10. Hadoop之HDFS扩容方法

    HDFS就是用来存取数据的,那么当数据太多的时候存不下,我们必需扩充硬盘容量,或者换个更大的硬盘. 由于它是分布式文件系统,有两种扩充HDFS集群容量的方法:横向扩容和纵向扩容 横向扩容 横向扩容就是 ...