gulp常用插件之gulp-useref使用
时间:2019-12-14
本文章向大家介绍gulp常用插件之gulp-useref使用,主要包括gulp常用插件之gulp-useref使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并。注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if
插件使用.
安装
一键安装不多解释
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'));
});
原文地址:https://www.cnblogs.com/jiaoshou/p/12040144.html
- spark三种连接join
- 用firebug给firefox添加信任链接
- Elasticsearch索引别名、Filtered索引别名、Template
- 追本溯源:Oracle 只读表空间的探索实践
- firefox查看微信公众平台的数据分析时就出现不信任链接怎么办?
- spark-streaming集成Kafka处理实时数据
- 使用spark与MySQL进行数据交互的方法
- python分布式环境下的限流器
- commons-pool与commons-pool2连接池(Hadoop连接池)
- Glusterfs 文件系统
- 时过境迁:Oracle跨平台迁移之XTTS方案与实践
- Kazoo Python Zookeeper 选主
- Linux Redis集群搭建与集群客户端实现
- python使用上下文管理器实现sqlite3事务机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Java基础-3】数据结构之JSON浅析
- linux环境svn服务端及windows环境客户端安装配置
- 【Java集合-1】整体框架
- 【Java集合-2】HashMap简析
- 【Java集合-3】ArrayList简析
- Springboot之Security前后端分离登录
- Windows 10使用WSL作为python宿主机调试开发
- 小米正式开源 SQL 智能优化与改写工具 SOAR
- 【SpringBoot-1】面向小白编程:从0开始创建一个SpringBoot项目
- 【SpringBoot-3】Lombok使用详解
- 【JMeter系列-3】JMeter元件详解之配置元件
- 【JMeter-4】JMeter元件详解之逻辑控制器
- 【JMeter-4】JMeter关联:JMeter正则表达式提取器与JSON提取器
- 【JMeter系列-5】JMeter操作Mysql数据库
- 【JMeter系列-6】JMeter BeanShell Sampler与JMeter BeanShell断言