gulp-html-replace
来源:互联网 发布:淘宝xylife海外专营店 编辑:程序博客网 时间:2024/06/02 00:07
原文链接:https://www.npmjs.com/package/gulp-html-replace?from=singlemessage&isappinstalled=1%20For%20security,%20do%20not%20share%20your%20WeChat%20account%20information%20online.
Table of Contents
- Usage
- API
- Example
- Upgrade
Usage
Install:
npm install --save-dev gulp-html-replace
Put some blocks in your HTML file:
<!-- build:<name> -->Everything here will be replaced<!-- endbuild -->
name
is the name of the block. Could consist of letters, digits, underscore ( _ ) and hyphen ( - ) symbols.
API
htmlreplace(tasks, options)
tasks
Type: Object
{task-name: replacement}
- task-name - The name of the block in your HTML.
- replacement -
String|Array|stream.Readable|Object
The replacement. See examples below.
Simple example:
// Options is a single string // Options is an array of strings
If your options strings ends with
.js
or.css
they will be replaced by correct script/style tags, so you don't need to specify a template like in the example below.
Advanced example:
// Options is an object // Multiple tag replacement
- src -
String|Array|stream.Readable
Same thing as in simple example. - tpl -
String
Template string. Uses util.format() internally.
In the first example
%s
will be replaced withimg/avatar.png
producing<img src="img/avatar.png" align="left">
as the result.
In the second example
data-main="%s"
andsrc="%s"
will be replaced withdata-main.js
andrequire-src.js
accordingly, producing<script data-main="data-main.js" src="require-src.js"></script>
as the result
Extended replacements:
// Replacement based on the file being processed // Extended replacement combined with standard replacement
- src -
null|String|Array|stream.Readable
Same as examples above but null if there are no standard replacements in the template. - tpl -
String
Template string. Extended replacements do not useutil.format()
and are performed before standard replacements.
In the first example
src
is null because there are no standard replacements.%f
is replaced with the name (without extension) of the file currently being processed. If the file being processed isxyzzy.html
the result is<script src="xyzzy.js"></script>
.
In the second example
src
has been set to the string'dir'
. Extended replacements are processed first, replacing%f
withxyzzy
, then%s
will be replaced withdir
resulting in<script src="dir/xyzzy.js"></script>
.
Valid extended replacements are:
- %f - this will be replaced with the filename, without an extension.
- %e - this will be replaced with the extension including the
.
character.
Stream replacements:
Everywhere a string replacement can be given, a stream of vinyl is also accepted. The content of each file will be treated as UTF-8 text and used for replacement. If the stream produces more than a file the behavior is the same as when an array is given.
// Replacement is a stream
options
Type: object
All false
by default.
- {Boolean} keepUnassigned - Whether to keep blocks with unused names or remove them.
- {Boolean} keepBlockTags - Whether to keep
<!-- build -->
and<!-- endbuild -->
comments or remove them. - {Boolean} resolvePaths - Try to resolve relative paths. For example if your
cwd
is/
, your html file is/page/index.html
and you set replacement aslib/file.js
the result path in that html will be../lib/file.js
Options example:
Example
index.html:
<!-- build:css --> <!-- endbuild --> <!-- build:js --> <!-- endbuild -->
gulpfile.js:
var gulp = ;var htmlreplace = ; gulp;
Result:
Upgrade
From 0.x to 1.x
This version introduces streaming support, less confusing API, new option keepUnused and full code overhaul.
- If you used single task like this:
htmlreplace('js', 'script.js')
just change it tohtmlreplace({js: 'script.js'})
- If you used single task with template:
htmlreplace('js', 'script.js', '<script="%s">')
change it tohtmlreplace({js: {src: 'script.js', tpl: '<script="%s">'})
files
renamed tosrc
, see previous example. Rename if needed.
From 1.1.x to 1.2.x
This version switches to the new way of specifying options which is more future-proof. Before it was
htmlreplace(tasks, keepUnassigned = false)
, now it'shtmlreplace(tasks, {keepUnassigned: false})
. No action required, old syntax will still work, but it is advisable to switch to the new syntax.
- gulp-html-replace
- jsp生成html--replace
- Does XML replace HTML?
- replace 所有html标签
- gulp输出的css,js,html格式
- gulp
- Gulp
- gulp
- Gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- Gulp
- gulp
- 电路交换与分组交换
- 网易有道2017校园招聘编程题——洗牌
- HDU 5528 Count a * b(线性筛+积性函数)
- Spring AOP 实现用户权限验证
- 三次握手和四次挥手
- gulp-html-replace
- OSI七层模型与TCP/IP四层模型
- DbUnit使用简介
- IP地址分类
- linux配置tomcat
- Spring MVC 实现跨域资源 CORS 请求
- 【Java多线程与并发库】5.线程范围内共享变量的概念与作用
- Matlab Robotic Toolbox V9.10工具箱(四):常用函数
- JavaScript中的表格对象