gulp构建项目（六）：gulp-html-tpl处理公用模板

最新推荐文章于 2024-04-24 10:06:14 发布
最新推荐文章于 2024-04-24 10:06:14 发布
阅读量4.3k 收藏 1
点赞数 2
分类专栏： Gulp 文章标签： gulp gulp-html-tpl gulp提取通用模板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guang_s/article/details/84675106
版权

需求分析：多页面应用，html模板的meta、link、title、script都有通用的部分，包括header和footer。那么，

  • 如何提取通用部分，如何引用
  • 如何处理不同的部分（比如部分页面需要单独引用文件）

一、安装gulp-html-tpl、art-template模块

说明：gulp-html-tpl配置的时候需要使用art-template进行数据渲染

npm i -D gulp-html-tpl art-template

二、gulp-html-tpl配置使用

1、gulp-html-tpl参数说明
/**
*   @param tag 引入模板的标签，默认为字符串 template
*   @param paths 字符串或数组，定义跨目录查找的目录路径
*   @param engine 模板渲染引擎函数
*   @param data 模板渲染的初始数据
*   @param beautify HTML美化参数，传递给 js-beautify 插件
*   @param dataTag 本页默认数据标记标签 （本页默认数据在渲染本页面之前以 eval() 执行并获得）
*   @param log 错误信息打印函数，值为 false 时不打印
*/

htmltpl({
    tag: '',
    paths: glob,
    engine: fn,
    data: {},
    beautify: {},   
    dataTag: '',
    log: fn
})
2、gulp-html-tpl配置

gulpfile.js

var htmltpl = require('gulp-html-tpl');     // 引用html模板
var artTemplate = require('art-template');  // 模板渲染

gulp.task('html', function() {
    return gulp.src('./src/*.html')
        .pipe(htmltpl({
            tag: 'template',
            paths: ['./src/common'],
            engine: function(template, data) {
                return template && artTemplate.compile(template)(data);
            },
            data: {      //初始化数据
                header: false,
                g2: false
            }
        }))
        .pipe(gulp.dest('./dist'));
});

三、gulp-html-tpl通用模板定义

1、语法说明
  • 模板中的语法遵循的是art-template的语法规则；
  • 模板中使用的数据对应htmltpl()中的data；
2、创建common文件夹，新建header.html和footer.html文件

common/header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.min.css">
    <title>{{title}} - gulp教程</title>
</head>
<body>
    {{if header}}
    <header>
        <h1>header</h1>
    </header>
    {{/if}}

common/footer.html

    <footer>
        <h1>footer</h1>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/template.min.js"></script>
    {{if g2}}
    <script src="js/data-set.min.js"></script>
    <script src="js/g2.min.js"></script>
    {{/if}}
    <script src="js/main.min.js"></script>

</body>
</html>

四、gulp-html-tpl模板引用

1、引用说明
  • 采用标签的方式引用，标签名对应htmltpl()里的tag；
  • src路径对应需要引用的模板名称，具体路径指向已经在htmltpl()中的path指定了；
  • 通过设置属性值传递参数：如title、header、g2
2、html文件修改结果如下：

index.html

<template src="header.html" title="首页" header></template>

<section>
    <h1>我是index页面</h1>
    <a href="./center.html">jump to center.html</a>
    <a href="./shop.html">jump to shop.html</a>
    <div class="box">
        <span>1</span>
        <span>2</span>
    </div>
</section>

<template src="footer.html" g2></template>

center.html

<template src="header.html" title="个人中心"></template>

<section>
    <h1>我是center页面</h1>
    <button class="btn">button</button>
</section>

<template src="footer.html"></template>

五、执行npm run dev，查看打包后的文件

对比dist/index.html和dist/center.html文件，看看有什么不同

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.min.css">
    <title>首页 - gulp教程</title>
</head>

<body>

    <header>
        <h1>header</h1>
    </header>

    <section>
        <h1>我是index页面</h1>
        <a href="./center.html">jump to center.html</a>
        <a href="./shop.html">jump to shop.html</a>
        <div class="box">
            <span>1</span>
            <span>2</span>
        </div>
    </section>

    <footer>
        <h1>footer</h1>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/data-set.min.js"></script>
    <script src="js/g2.min.js"></script>

    <script src="js/main.min.js"></script>

</body>

</html>

dist/center.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.min.css">
    <title>个人中心 - gulp教程</title>
</head>

<body>

    <section>
        <h1>我是center页面</h1>
        <button class="btn">button</button>
    </section>

    <footer>
        <h1>footer</h1>
    </footer>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="js/main.min.js"></script>

</body>

</html>

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题

猿始森林
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
gulp-jade 动态数据渲染编译模板 热更新案例开发
小青蛙的博客
06-03 1197
导读 我们今天来聊一聊如何使用gulp编译生成jade模板；如果你想快速编写html，就可以使用node下很火的一款模板语法jade， 但你便写完代码后，想要立即看到效果就可以使用gulp生态里面的gulp-jade插件，它可以把jade文件动态编译渲染成html， 包括数据列表的渲染 我们要实现的目标效果是：编辑jade文件保存，页面自动热更新 案例代码 - 第一阶段 ( 初级阶段 ) 下面这个...
gulp-bom:将UTF-8 BOM添加到文件
05-26
安装 $ npm install --save-dev gulp-bom用法 const gulp = require ( 'gulp' ) ;const bom = require ( 'gulp-bom' ) ;exports . default = ( ) => (gulp . src ( 'app.js' ). pipe ( bom ( ) ). pipe ( gulp . ...
gulp-html-include-boilerplate:使用gulp-file-include和browser-sync的简单样板
04-30
gulp-html-include-样板 使用gulp-file-include，浏览器同步和gulp-sass的简单样板 安装软件包 yarn 运行gulp命令 yarn dev 帮助链接
探索 `gulpStart`：一个高效的 Gulp 开发启动模板
最新发布
gitblog_00093的博客
04-24 413
探索 gulpStart：一个高效的 Gulp 开发启动模板 项目地址:https://gitcode.com/zimv/gulpStart 项目简介 gulpStart 是一款为前端开发者量身定制的 Gulp 工作流模板项目。它提供了一个快速、稳定且可扩展的基础框架，帮助开发者节省配置时间，更专注于代码编写。如果你是 Gulp 的新手或者希望优化你的构建流程，gulpStart 将是你理想的...
gulp页面模板编译
10-20 244
首先要安装gulp yarn add gulp --dev 根据需要安装的一些gulp的常用插件 压缩css代码的转换流插件 yarn add gulp-clean-css --dev babel的插件 yarn add gulp-babel @babel/core @babel/preset-env --dev 模板引擎插件 yarn add gulp-rename --dev 在根目录下面创建一个gulpfile.js的文件，代码如下 const {src,dest,par
gulp来处理html、css、js资源啦
hello ice cream
07-31 384
html文件通过插件对代码压缩less文件使用插件gulp-less解析，css文件兼容性通过处理js文件使用gulp-babel进行代码转换，压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍，更多有关前端、工程化的内容可以参考我其它的博文，持续更新中~httpshttpshttpshttpshttpshttps。...
tpl使用html格式
hqmln的博客
09-05 2010
让eclipse新建的tpl使用html默认格式      
html5前端开发的干货模板“text/tpl” script template
MiuWing的博客
07-10 1017
text/tpl 顾名思义就是模板，其实和C++模板函数类似的作用，就是利用他生成一个HMTL内容，然后append或者替换html里面 有什么好处，假如后端返回来的数据都是一样的，但是需要生成不同的内容时候，这个时候使用模板减少代码量是最好的，我只需要定义不同模板，调用同一个id就写同一个生成代码就行了，这就是模板好处，就不用写那么多js的字符串++操作，烦死人了 下
gulp-html-toc：用于html-toc的Gulp插件，用于生成HTML目录
02-04
gulp-html-toc 用于html-toc的Gulp插件，用于生成HTML目录。 安装 使用安装： $ npm install --save gulp-html-toc 安装： $ yarn add gulp-html-toc 用法 var toc = require ( 'gulp-html-toc' ) ; gulp . task...
gulp-stream-promise：将gulp-stream转换为Promise
02-03
承诺承诺 将gulp流转换为promise。 介绍 在Gulp 4中，所有任务功能都必须是异步的，这意味着任务功能需要返回gulp流或promise等。 使用此功能，我们可以...$ npm install --save gulp-stream-to-promise 要求： cons
gulp-ejs：:artist_palette:ejs模板的Gulp插件
02-03
gulp-ejs EJS插件的用法首先，安装gulp-ejs作为开发依赖项： npm install --save-dev gulp-ejs 然后，将其添加到您的gulpfile.js ： var ejs = require ( "gulp-ejs" )gulp . src ( "./templates/*.ejs" ). pipe ( ...
gulp-tpl-to-js:将一个目录下的html模板转成一个js文件
05-30
gulp-tpl-to-js 该gulp插件主要是将一个目录下的html文件内容生成到一个js文件当中，可以生成位commonjs、cmd、json格式的模板。 安装: npm install gulp-tpl-to-js --save-dev 使用方式： 目录结构如下 template 1.html 2.html d1 d1_1.html d1_2.html d1_dd1 d1_dd1_1.html d1_dd1_2.html 当生成的js文件中导出的对象结构跟目录结构是类似的，目录名对应为一个对象，文件名对应文件内容. 示例代码 var gulp = require('gulp'); var tpl=require('gulp-tpl2js'); gulp.task('default',function(done){ tpl({ dir:'./template', dest:
gulp-js-templates:构建脚本导入模板
05-01
gulp-js-模板 将模板文件添加到javascript对象。 安装 npm install gulp-js-templates 基本用法 var jtpl = require ( 'gulp-js-templates' ) ; gulp . task ( 'templates' , function ( ) { return gulp . src ( './templates/**/*.mustache' ) . pipe ( jtpl ( 'templates.min.js' , { varName : 'myTemplates' } ) ) . pipe ( gulp . dest ( './public/dist' ) ) ; } ) ; 选项 插件支持以下选项： varName ：用于保存模板的全局范围变量的字符串 base ：从每个文件路径的开头删除的字
gulp-blog:gulp多页模块化
05-11
gulp-blog 基于gulp, gulp-file-include, gulp-requirejs-optimize等的多页面脚手架。 这个分支是使用了rjs作为打包方式，打包配置文件在conf/gulp.rjs.conf.js中， 实现了公共模块与业务模块分离，最大限度优化性能。 也是基于gulp+requirejs+arttemplate+jquery+express的前后端分离的响应式web项目，另有, 和 。 此项目主要是简单实现了首页，完整版本的可以见vue和react这两个版本。 功能 npm run dev开发环境任务 本地服务器 自动刷新 css,html文件编译 增量任务 npm run build生产环境任务 预览服务器 css,html模板编译 css打包压缩，版本控制 js模块打包压缩，版本控制，公共模块与业务模块分离 background-image生成雪碧图
gulp-jshtml:Gulp 插件将传递的 HTML 转换为 Javascript
07-04
gulp-jshtml Gulp 插件将传递的 HTML 流转换为 Javascript $ npm install gulp-jshtml 用法 jshtml = require ( 'gulp-jshtml' ) , gulp . task ( 'jshtml' , function ( ) { return gulp . src ( 'src/**/*.html' ) . pipe ( jshtml ( { invoke : "templates.add" } ) ) . pipe ( gulp . dest ( 'dist/' ) ) } ) ; ####注意事项 该插件会转义源 HTML 中的所有相关字符，将制表符/空格折叠为一个空格并修剪结果。 ####Options invok
gulp-template:轻巧快速的Gulp 4模板
05-19
Gulp 4模板 这个Gulp 4模板是为轻量级静态网站开发的 模板是为 :fire: 快速舒适地开发静态网站 :fire: 让我描述一下。 特征 ES6语法对gulpfile的支持 所有任务都组织在其文件夹中 用于启动，构建和可选任务的NPM脚本 干净整洁的构建和开发任务 您的静态Web开发中需要的所有东西 我会尽力让您满意；） 模板的文件夹结构 该模板具有标准文件夹，例如src，dist，gulp。 详细的目录布局 . ├── dist # Compiled project ├── gulp # Templates main folder │ ├── tasks # All gulp tasks are described here │ └── config.js # Paths config ├─
gulp html模板,一些有用的 gulp 模板
weixin_32224617的博客
06-18 194
/*** 引入依赖*/var gulp = require('gulp'),babel = require('gulp-babel'),sass = require('gulp-sass'),browserify = require('gulp-browserify2'),uglify = require('gulp-uglify'),minifycss = require('gulp-minif...
gulp怎么运行html文件,gulp-usemin怎么处理多个html文件
weixin_35983438的博客
06-21 179
满意答案不要用 gulp-usemin，用gulp-inject。先将公共库和公共样式合并压缩好，再替换到每个html页面。写个思路，仅供参考，唯一麻烦的是每个html页面都得加一段注释全选复制放进笔记var gulp = require('gulp');var inject = require('gulp-inject');gulp.task('minJS', function(){return...
Gulp模块的使用
weixin_54973904的博客
04-08 94
Gulp 基于node平台开发的前端构建工具，完成一些机械化的操作 比如合并压缩html css js文件 Gulp的使用 1.npm install gulp下载库文件 2. 创建filegulp.js文件 名字不能随便改 3. 创建文件及src放源代码 文件夹dist放重建后的代码 4. 在filegulp.js写任务 5. 命令行执行任务 使用glup压缩文件 6. 下载gulp 7. 将文档放在src中 8. 在filegulp中编写命令 Gulp提供的命令 gulp.src（）: 获取任务要处理
gulp browser-sync 配置项目 html css js
05-14
首先需要安装 `gulp` 和 `browser-sync`，可以使用以下命令安装： ``` npm install gulp browser-sync --save-dev ``` 然后在项目根目录下创建一个 `gulpfile.js` 文件，添加以下代码： ```javascript var gulp = require('gulp'); var browserSync = require('browser-sync').create(); // 静态服务器 gulp.task('server', function() { browserSync.init({ server: { baseDir: "./" } }); // 监听 html 文件变化 gulp.watch("*.html").on('change', browserSync.reload); // 监听 css 文件变化 gulp.watch("css/*.css").on('change', browserSync.reload); // 监听 js 文件变化 gulp.watch("js/*.js").on('change', browserSync.reload); }); ``` 上述代码中，`gulp.task` 方法用于定义一个任务，`browser-sync` 用于创建一个静态服务器，并监听文件变化。 在命令行中执行 `gulp server` 命令，即可启动静态服务器，项目中的 html、css、js 文件发生变化时，浏览器会自动刷新。 注：以上代码仅供参考，具体配置需要根据项目实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值