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'));
});
gulp常用插件之gulp-useref使用的更多相关文章
- 精通gulp常用插件
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...
- gulp常用插件之gulp-rev-collector使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径. ...
- node和gulp实现前端工程自动化(附：gulp常用插件)
/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...
- gulp常用插件之gulp-eslint使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...
- gulp常用插件之gulp-babel使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...
- gulp常用插件之gulp-postcss使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...
- gulp常用插件之cssnano使用
更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...
- gulp常用插件之pump使用
更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...
- gulp常用插件之gulp-notify使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...
随机推荐
- JDK14都要问世了，你还在用JDK8吗
Java开发工具包(JDK)14已进入发布候选阶段,总体功能基本已确定.计划中的标准Java升级将具有新功能,例如JDK Flight Recorder事件流,模式匹配和开关表达式. JDK 14计划 ...
- [Redis-CentOS7]Redis事务操作(六)
事务操作 隔离操作: 事务中所有的命令都会序列化,按顺序执行,不会被其他命令打扰 原子操作: 事务中所有的命令要么全部执行,要么全部不执行 添加事务并执行 127.0.0.1:6379> MUL ...
- FTP服务器配置http访问（配置nginx+ftp服务器）
一.搭建nginx服务器 先安装nginx服务器 # yum install nginx -y 启动nginx服务 # systemctl start nginx 浏览器访问:http://192.1 ...
- vue中子组件触发父组件的方法
网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...
- clr via c# 程序集加载和反射(2)
查看,clr via c# 程序集加载和反射(1) 8,发现类型的成员: 字段,构造器,方法,属性,事件,嵌套类型都可以作为类型成员.其包含在抽象类MemberInfo中,封装了所有类型都有的一组属性 ...
- webapi+Quartz.NET解决若干定时程序同时运行的问题
项目现状: 有若干定时程序需要自启动运行,为了简便程序部署等问题,采取这种办法把定时程序集中管理到webapi中跟随api发布 代码架构介绍: 新建一个类库,类库引用Quartz(Quartz.2.3 ...
- 使用TensorRT对人脸检测网络MTCNN进行加速
前言 最近在做人脸比对的工作,需要用到人脸关键点检测的算法,比较成熟和通用的一种算法是 MTCNN,可以同时进行人脸框选和关键点检测,对于每张脸输出 5 个关键点,可以用来进行人脸对齐. 问题 刚开始 ...
- 算法训练 最大获利 注意数据规模（long long）
资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 Chakra是一位年轻有为的企业家,最近他在进军餐饮行业.他在各地开拓市场,共买下了N个饭店.在初期的市场调研中,他将一天划分为M ...
- Windows下 JDK1.8环境配置
安装JDK1.8,安装时会安装jdk.jre. 如果只是在IDEA中写写代码,安装完jdk,在IDEA中指定jdk路径就可以了. 如果要在命令行下执行jdk的命令,比如java.javac,或者要使用 ...
- mysql必知必会--MySQL简介
什么是MySQL MySQL已经存在很久了,它在世界范围内得到了广泛的安装和使用. 为什么有那么多的公司和开发人员使用MySQL?以下列出其原因. 成本--MySQL是开放源代码的,一般可以免费使用( ...