gulp-swig动态数据模板编译输出html文件

最新推荐文章于 2021-06-25 07:52:40 发布
最新推荐文章于 2021-06-25 07:52:40 发布
阅读量1.3k 收藏
点赞数
分类专栏： node gulp 前端工具 javascript 文章标签： node gulp js gulp-swig
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu5229485/article/details/90903296
版权
本文介绍了如何在开发过程中利用gulp-swig插件快速编译动态数据模板为HTML文件。通过案例展示了创建入口文件、模板继承，并详细说明了安装依赖及执行gulp命令的过程。
摘要由CSDN通过智能技术生成

导读

在node开发的过程中使用使用swig模板的情况比较多的，所以呢，如何快速便捷编译swig模板成为我们的一个面临的选择，使用webpack下的loader，还是gulp生态圈的插件呢？
这里我推荐使用gulp-swig插件，可以在本地使用swig快速开发web项目，包括数据的输入，模板的继承等等

开始案例开发

在开发目录下新建./swig/swig-index.html入口文件,./swig/layout.html模板继承文件：

  1. layout.html 编辑内容如下：
<!doctype html>
<html>
	<head>
		<meta chartset="utf-8">
		<title>{
  { title }}</title>
		{% block head %}{% endblock %}
	</head>
	<body>
		{% block content %}{% endblock %}
		{% block box %}{% endblock %}
	</body>
</html>
  1. swig-index.html 编辑内容如下：
{% extends "./layout.html" %}
{% block head %}
	<script type="script/javascript">
		window.onload = function(){
    
			console.log("loaded");
最低0.47元/天 解锁文章
我的小英短
关注
专栏目录
gulp-swig-precompile:gulp 的 Swig 预编译器
07-09
gulp-swig-预编译 gulp 的 Swig 预编译器 安装 使用 npm 作为开发依赖项安装 npm install --save-dev gulp-swig-precompile 例子 此示例使您的模板成为 AMD 模块。 var gulp = require('gulp'), swig = require...
前端开源库-gulp-swig
08-29
前端开源库-gulp-swigGulp Swig，Gulp的Swig插件
gulp页面模板编译
10-20 254
首先要安装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（五）插件gulp-swig
weixin_33688840的博客
01-03 224
npm install --save-dev gulp-swig /* Get data via JSON file, keyed on filename. */ var swig = require('gulp-swig'); var data = require('gulp-data'); var getJsonData = function(file) { r...
swig 转义html,swig模板引擎语法
weixin_35318343的博客
06-16 239
本文档长期更新…由于在自定义博客的时候难免会遇到.swig 文件 但又不知道其语法及其含义。故很难改动…在这里本人亲测以及百度记录一下语法及其用法。格式化字符串12__('', ''){{ __('由 %s 强力驱动', 'Hexo') }}在这里%s 会被替换成 Hexo，最终效果为 由 Hexo 强力驱动注释12{# ...注释内容... #}{# __('footer.powered', ...
gulp 自动编译
weixin_47818467的博客
06-25 405
配置 import yargs from 'yargs'; const args=yargs // 区分运行环境 .option('production',{ boolean:true, default:false, describe:'描述' }) .option('watch',{ boolean:true, default:false, describe:'watch all files' }) //日志 .option('verbose',{ boolean:true,.
前端开源库-gulp-consolidate
08-29
运行`gulp templates`命令，所有`src/templates`目录下的EJS模板将被编译成HTML，并输出到`dist`目录。 ### 4. 支持的模板引擎 `gulp-consolidate`支持多种流行的模板引擎，包括但不限于： - **Jade**：一种简洁...
Node.js-swig是node端的一个优秀简洁的模板引擎
08-10
**Node.js-Swig模板引擎详解** Node.js是一个强大的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。Swig则是Node.js中的一个优秀的、简洁的模板引擎，它以其易于理解和使用的特性，受到了广大...
swig 转义html,Swig 使用指南
weixin_39701834的博客
06-16 252
Swig 使用指南一、如何使用1、APIswig.init({allowErrors: false,autoescape: true,cache: true,encoding: 'utf8',filters: {},root: '/',tags: {},extensions: {},tzOffset: 0});options:allowErrors: 默认值为 false。将所有模板解析和编译错误...
swig-loader:webpack 的 swig 加载器模块
07-02
用于 webpack 的 swig 加载器 用法 var template = require ( "swig!./file.html" ) ; // => returns file.jade content as template function 嵌入式资源 尝试对所有嵌入的资源使用require ，用 webpack 处理它们。 div img ( src = require ( " ./my/image.png " ) ) 您还需要为这些文件类型配置加载程序。 （看看。） 执照 麻省理工学院（ ）
前端开源库-swig-loader
08-30
前端开源库-swig-loaderSwig加载器，用于Swig模板的Webpack加载器
swig 转义html,SWIG Compatibility
weixin_34987818的博客
06-16 86
SWIG is known to work on the following platforms :UnixSWIG is configured and built using an autoconf script so it isrelatively easy to install on almost any flavor of Unix. However, most ofSWIG's dev...
html 模板 swig 预编译插件 grunt-swig-precompile
weixin_30466953的博客
07-31 319
GitHub grunt-swig-precompile NPM grunt-swig-precompile 在书写前端静态页面的时候，每个页面总在书写很多重复的标签。 为了提高效率，结合 swig.js 和 grunt 准备开发一套 grunt插件来完善前端开发的过程。 由于项目紧急上线，grunt-swig-precompile 0.2.X 版本是基于Allenice 的 grunt-html...
swig模板 html代码自然状态下输出是转义的，必须加一个函数来转换为html代码；...
weixin_34088598的博客
01-07 134
1 <div>{{o.content|raw}}</div> |raw 相当于一个函数，转义函数，最终输出结果为html代码； 转载于:https://www.cnblogs.com/suoking/p/5110943.html
Express使用html模板的两种方式swig,ejs
ferrysoul的博客
03-17 1463
一。swig /*app.js 应用(启动)入口文件 */ //加载express模块 var express = require('express'); //加载模板处理模块 var swig = require('swig'); //加载数据库模块 var mongoose = require("mongoose"); //加载body-parser,用来处理post提交过来的数据 va...
NodeJS中使用swig模板引擎
★匆匆★的专栏
02-19 7500
http://www.catcoder.com/post/NodeJS%E4%B8%AD%E4%BD%BF%E7%94%A8swig%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E NodeJS中的默认引擎是jade有点过于复杂，而且不是以HTML为基础的，学习成本和前端适应成本都很大。而ejs虽然简单，但不支持模板导入，而且效率一般。 swig的语法简单，
Gulp 案例（三）
qq_24719349的博客
11-14 167
一、样式编译 首先调用gulp提供的api=>src来指定需要编译的文件，这里可以使用通配符的方式指定多个文件。然后在src后面可以传入一些options，大家有兴趣可以去看文档，这里就不做过多介绍了：https://www.gulpjs.com.cn/docs/api/src/。 这里我们需要编译样式文件夹中的scss文件，所以需要用到gulp-sass这个包，所以需要先安装这个包（这里注意，gulp-sass里有一个node-sass模块依赖，这个依赖需要从国外库去下载，国内网络很可能下载不下来
简单而强大的swig.js
德莱问的博客
03-16 3285
swig的简单介绍swig是JS模板引擎，它有如下特点： 根据路劲渲染页面 面向对象的模板继承，页面复用 动态页面 快速上手 功能强大 swig的变量{{ foo.bar }} {{ foo['bar'] }} //如果变量未定义，输出空字符。swig的标签extends 使当前模板继承父模板，必须在文件最前 参数： file 父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承
Error: Cannot find module 'gulp-uglify
最新发布
06-14
当你遇到 "Error: Cannot find module 'gulp-uglify'" 这个错误时，它通常意味着Node.js在尝试运行一个依赖了 `gulp-uglify` 模块的Gulp任务时，找不到这个模块。`gulp-uglify` 是一个Gulp插件，用于压缩JavaScript代码以减少文件大小。 解决这个问题的步骤一般包括： 1. **检查安装**：确保你已经全局安装了Gulp（`npm install -g gulp`），然后在你的项目目录下安装 `gulp-uglify`（`npm install --save-dev gulp-uglify`）。 2. **配置文件**：确保你的Gulpfile.js或Webpack配置中正确地导入和使用了`gulp-uglify`。例如： ```javascript const uglify = require('gulp-uglify'); gulp.task('scripts', function() { return gulp.src('src/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }); ``` 3. **路径问题**：确认你引用模块的路径是否正确，特别是在使用ES6 import语法时，可能需要配合`babel-plugin-transform-import`来处理。 4. **更新或重新安装**：如果模块是旧版本，尝试更新到最新版（`npm update gulp-uglify`）或删除后重新安装（`npm uninstall gulp-uglify && npm install gulp-uglify`）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我的小英短

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值