在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):VFK/gulp-html-replace开源软件地址(OpenSource Url):https://github.com/VFK/gulp-html-replace开源编程语言(OpenSource Language):JavaScript 90.4%开源软件介绍(OpenSource Introduction):gulp-html-replace
Table of ContentsUsageInstall: npm install --save-dev gulp-html-replace Put some blocks in your HTML file: <!-- build:<name> -->
Everything here will be replaced
<!-- endbuild -->
APIhtmlreplace(tasks, options)tasksType:
Simple example:// Options is a single string
htmlreplace({js: 'js/main.js'})
// Options is an array of strings
htmlreplace({js: ['js/monster.js', 'js/hero.js']})
Advanced example:// Options is an object
htmlreplace({
js: {
src: 'img/avatar.png',
tpl: '<img src="%s" align="left" />'
}
})
// Multiple tag replacement
htmlreplace({
js: {
src: [['data-main.js', 'require-src.js']],
tpl: '<script data-main="%s" src="%s"></script>'
}
})
Extended replacements:// Replacement based on the file being processed
htmlreplace({
js: {
src: null,
tpl: '<script src="%f".js></script>'
}
})
// Extended replacement combined with standard replacement
htmlreplace({
js: {
src: 'dir',
tpl: '<script src="%s/%f".js"></script>'
}
})
Valid extended replacements are:
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
htmlreplace({
cssInline: {
src: gulp.src('style/main.scss').pipe(sass()),
tpl: '<style>%s</style>'
}
}) optionsType: All
Options example:htmlreplace({
js: {
src: null,
tpl: '<script src="%f".js></script>'
}
}, {
keepUnassigned: false,
keepBlockTags: false,
resolvePaths: false
}) Exampleindex.html: <!DOCTYPE html>
<html>
<head>
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild --> gulpfile.js: var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
}); Result: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script> UpgradeFrom 0.x to 1.x
From 1.1.x to 1.2.x
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论