更多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. Mysql的基本查询语句

    聚集函数 mysql有5个聚集函数,分别是AVG,MAX,MIN,SUM,COUNT. 分组 分组的使用group by作为关键字,having作为条件关键字. having和where的区别:1.w ...

  2. 【TensorFlow】TensorFlow获取Variable值，将Variable保存为list数据

    Variable类型对象不能直接输出,因为当前对象只是一个定义. 获取Variable中的浮点数需要从数据流图获取: initial = tf.truncated_normal([3,3], stdd ...

  3. python 处理10000个txt,每个文件夹里面放1000个。

    fileNumberInDiretory = 1000 title_list = getChongFuTitle(cursor) DiretoryNums = math.ceil(len(title_ ...

  4. Python编程：从入门到实践——【作业】——第六章（字典）

    第六章作业 6-1 人 : 使用一个字典来存储一个熟人的信息, 包括名. 姓. 年龄和居住的城市. 该字典应包含键first_name . last_name . age 和city . 将存储在该字 ...

  5. 对C语言整数类型的一点理解

    作者:autogeek 原文链接:http://www.cnblogs.com/autogeek/p/4321635.html 1.先从一个列子引出问题: //sample_1 unsigned ch ...

  6. webapi+Quartz.NET解决若干定时程序同时运行的问题

    项目现状: 有若干定时程序需要自启动运行,为了简便程序部署等问题,采取这种办法把定时程序集中管理到webapi中跟随api发布 代码架构介绍: 新建一个类库,类库引用Quartz(Quartz.2.3 ...

  7. git系列之---码云gitee 添加SHH公钥

    公钥 很多服务器都是需要认证的,SHH 认证是其中的一种:在客户端生成公钥,把生成的公钥添加到服务器,你以后连接服务器的时候就不用每次都输入用户名和密码了:很多git服务器都是用ssh认证方式,你需要 ...

  8. MySQL手工注入学习-1

    MySQL手工注入学习 SQLi-labs 手工注入学习 以下是通过SLQi-labs平台的部分简单例题的手工注入过程 Less-1:union联合查询注入 页面提示:Please input the ...

  9. 范式通俗理解：1NF、2NF、3NF和BNCF

    https://blog.csdn.net/wyh7280/article/details/83350722 范式通俗理解:1NF.2NF.3NF和BNCF原创hongiii 最后发布于2018-10 ...

  10. MySQL服务器的运维与优化

    MySQL运维 安装数据库 配置本地yum源,将gpmall-repo文件上传至/opt目录 创建yum.repo文件 安装mariadb服务 # yum install -y mariadb mar ...