使用 gulp-html-replace 前端自动化配置替换html模板中指定内容
屠杰
导读
在某些开发项目中，我们需要用到动态输出index.html文件，而这个页面文件内的资源也是需要动态加载的，就比如说在线面这些开发条件：
- 一些静态资源需要加版本号
- 动态编译
sass，把编译后的内容动态植入html的style标签中，或者自动引用编译好的css文件 - 在
index.html文件中，动态插入多个js文件的script脚本内容 - 如果你想往页面中动态插入一些你需要的一些内容，那
gulp-html-replace这款插件那就肯定适合您！
安装
cnpm install --save-dev gulp-html-replace
基本使用
index.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 -->
</body>
</html>
gulpfile.jsgulp 入口文件编辑如下：
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
const hr = (done) => {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
done()
}
exports.default = hr
- 编译后的
build/index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>
</body>
<html>
这里这个案例呢，是gulp-html-replace的基本使用方法，把配置好的js、css文件，编译成script以及link标签自动引入到html
知识进阶
- 首先我们来了解
gulp-html-replace的参数有哪些呢？我们来看下面这个结构，对每个属性进行一次解读：
htmlreplace({
js: {
src: "build/js/",
tpl: '<script src="%s%f".js></script>'
}
}, {
keepUnassigned: false, // 默认 false
keepBlockTags: false, // 默认 false
resolvePaths: false // 默认 false
})
- js
: 这里的js是html引入模板的名称 , 对应 html中的` - src : 这里的src是一个替换tpli模板字符串通配符（类似于
%s %f %e等）的一个变量， 它会替换tpl字符串中的%s, 可以是字符串，字符串数组，Stream、null 等 - tpl : 模板字符串，替换
html页面中的模板的字符串 - keepUnassigned : 是否保留未使用的名称或者删除它们 ( 感觉用处不大 )
- keepBlockTags: 是否保留或者删除html中的模板 and
- resolvePaths: 尝试解析 relative 路径。 例如如果 cwd 是 /，html文件是 /page/index.html，你将替换为 lib/file.js，该html中的结果路径将是 …/lib/file.js
案例进阶
- 首先我们来看
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main html</title>
<!-- build:js -->
<!-- endbuild -->
<!-- build:nulljs -->
<!-- endbuild -->
<!-- build:dirjs -->
<!-- endbuild -->
<!-- build:css -->
<!-- endbuild -->
<!-- build:streamCss -->
<!-- endbuild -->
</head>
<body>
hello world !
<section class="section-box-1"></section>
<section class="section-box-2"></section>
<!-- build:image -->
<!-- endbuild -->
<!-- build:sassTocss -->
<!-- endbuild -->
</body>
</html>
- 接下来我们再来看
gulpfile.js文件，编辑如下：
let gulp = require("gulp");
let gulpLoadPlugins = require('gulp-load-plugins');
let $ = gulpLoadPlugins({lazyload: true, rename:{"gulp-ruby-sass" : "sass"}});
var htmlreplace = require("gulp-html-replace")
const clear = (done) => {
del.sync(['./dist/newjs/*','!./dist/newjs','./dist/newcss/*','./dist/newcss'])
done()
}
const hr = (done) => {
gulp.src(["./html/main.html"])
.pipe(htmlreplace({
js:{
src:[ ["./js/add.js","./js/add.js"] ],
tpl: '<script data-main="%s" src="%s"></script>' // 将数组编译到模板字符串中
},
nulljs:{
src:null,
tpl: '<script data-main="nulljs" src="%f.js"></script>' // 将数组编译到模板字符串中
},
dirjs:{
src:'dirpath',
tpl: '<script data-main="nulljs" src="%s/%f.js"></script>' // 把字符串%s（这里是 dirpath）以及 文件名%f（这里是main）编译到到模板字符串中
},
css:{
src:[ ["css/style.js","css/style1.js","css/style2.js"], ],
tpl: '<link ref="stylesheet" type="text/css" href="%s" />\n<link ref="stylesheet" type="text/css" href="%s" />\n<link ref="stylesheet" type="text/css" href="%s" />\n' // 编译多个css link字符串
},
image:{
src:[["images/01.jpg", "images/02.jpg"]], // 静态资源个人建议使用Stream类型 让其自动遍历
tpl: `<image src="%s?v=${Math.random()}" />\n<image src="%s?v=${Math.random()}" />` // 编译多个img 图片字符串 带随机版本号，类似于hash
},
sassTocss:{
src: $.sass("./scss/*.scss"), // 编译多sass文件成css 把编译后的css内容植入页面的style标签中
tpl: '<style>%s</style>'
}
},{
keepUnassigned: false,
keepBlockTags: false,
resolvePaths: false
}))
.pipe(gulp.dest('./dist/newjs/')) // 输出到 dist/newjs/ 目录文件夹下
done()
}
exports.default = gulp.series(clear, hr)
总结
在前端自动化工作流中，我们的任务是复杂多变的，所以我们需要很多强有力的工具来辅助我们完成任务，gulp-html-replace就是一个不错的gulp插件工具，在编译脚本css后，再动态植入index.html中，配合live-server、brower-sync等插件使用，简直爽翻天，今天的gulp插件分享就到这里，如果希望了解更多的前端自动化的知识，可以关注我的博客哟 ~~
类似资料：