导读

在某些开发项目中，我们需要用到动态输出index.html文件，而这个页面文件内的资源也是需要动态加载的，就比如说在线面这些开发条件：

  • 一些静态资源需要加版本号
  • 动态编译sass，把编译后的内容动态植入html的style标签中，或者自动引用编译好的css文件
  • 在index.html文件中，动态插入多个js文件的script脚本内容
  • 如果你想往页面中动态插入一些你需要的一些内容，那gulp-html-replace这款插件那就肯定适合您！

安装

cnpm install --save-dev gulp-html-replace

基本使用

  1. 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>
  1. gulpfile.js gulp 入口文件编辑如下：
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
  1. 编译后的 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

知识进阶

  1. 首先我们来了解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

案例进阶

  1. 首先我们来看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>
  1. 接下来我们再来看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插件分享就到这里，如果希望了解更多的前端自动化的知识，可以关注我的博客哟 ~~

  • 新浪博客 小青蛙的博客 http://blog.sina/riversfrog
  • CSDN博客 小青蛙的博客 https://blog.csdn/WU5229485

更多推荐

使用 gulp-html-replace 前端自动化配置替换html模板中指定内容