更多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'));
});

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. qt creator源码全方面分析(2-3-2)

    目录 Showing Task List Files in Issues Pane 管理任务列表条目 任务列表文件格式 Showing Task List Files in Issues Pane 您 ...

  2. c++头文件包含 #ifndef ##pragma once

    2013-04-14 17:03 (分类:计算机程序) 烦死了,这种垃圾小问题很多,你又必须要知道.......在编写c++程序时,会编写多个类或者多个cpp文件,免不了要多次使用include包含头 ...

  3. 【转载】signal(SIGCHLD, SIG_IGN)和signal(SIGPIPE, SIG_IGN)

    来源:https://blog.csdn.net/guotao1983/article/details/82118218 signal(SIGCHLD, SIG_IGN) 因为并发服务器常常fork很 ...

  4. Webpack之(progressive web application) - PWA中的 Service Workers 是什么

    学习文档:https://webpack.docschina.org/guides/progressive-web-application/ 参考文档:https://developers.googl ...

  5. vs code支持 es6, node.js 语法提示

    npm install --save-dev @types/node 安装这个东西就可以了, 代码拷走, 回去愉快的敲代码吧

  6. Go语言SQL注入和防注入

    Go语言SQL注入和防注入 一.SQL注入是什么 SQL注入是一种注入攻击手段,通过执行恶意SQL语句,进而将任意SQL代码插入数据库查询,从而使攻击者完全控制Web应用程序后台的数据库服务器.攻击者 ...

  7. 使用 Apache James 3.3.0(开源免费) 搭建内网电子邮件服务器(基于 Windows + Amazon Corretto 8)

    电子邮件服务器,对于很多公司,都是需要的. 虽然现在很多人,使用 QQ .微信进行一对一的工作沟通,使用QQ 群.微信群进行多人沟通,但这些即时聊天工具,与电子邮件相比,仍有很多不足: a. 电子邮件 ...

  8. pycharm中新建Vue项目时没有vue.js的解决办法

    可能很多小伙伴在使用pycharm 1,新建vue项目的时候并没有发现vue.js的名字, 2,新建.vue文件(即单文件组件)的时候没有 下面就来帮助大家一下,仅供参考 如图: 1.首先我们打开设置 ...

  9. python基础之字典功能

    python中字典是个很重要的功能,使用键值(key-value)存储,具有极快的查找速度.值得注意的是,字典的key要为不可变对象,比如字符串.字母,但不能是可变的,比如列表等. 1.字典的定义: ...

  10. 使用JDK工具进行Java服务器应用程序故障排除

    Java性能调优指南–有关提高Java代码性能的各种技巧. 最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想. 1. 介绍 在Java世界中,我们大多数人习惯于在Java应 ...