Joen's Blog

用gulp来构建后台模板

coding三月 25, 20161mins

痛点H2

Java的后台模板引擎有几个痛点一直比较困扰我。一是模板功能对其一些引擎（swig、jinjia、pugjs）比较弱，单是一个模板继承很多引擎都需要第三方扩展，而且功能也非常的受限。二是从HTML静态页面到模板页面的转换以及后期修改的维护非常麻烦。针对这两个问题，一直希望有个方案能够解决。

其实这两个问题可以归结为一个问题，如果模板引擎的语法和静态的HTML我完全兼容的，即模板页面可以直接当做HTML打开，又可以给引擎渲染显示动态的内容。那么前后台就都可以对模板页面进行开发，并且也能够用gulp来编译模板页面了。

模板引擎的选择H2

对于后台模板引擎的选择，Thymeleaf是较好的选择，他完全兼容HTML的语法，并且指令是通过属性来设置的，直接打开后不会显示无法解析的内容。

对于前台模板引擎，同样的也需要完全兼容HTML，需要有继承的功能，并且语法内容不能影响Thymeleaf的解析。这里我选择swigjs。

集成示例H2

下面是一个Thymeleaf的layout页面

bash
<!doctype html>
<html class="no-js" lang=""
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">wisdomwater</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css /content/css/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
    <!-- endinject -->
    <link rel="stylesheet" href="/content/css/vendor.css"/>
    <!-- endbuild -->
    <!-- build:css /content/css/main.css -->
    <link rel="stylesheet" href="/content/css/main.css"/>
    <!-- endbuild -->
</head>
<body>
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div>
    <nav class="navbar navbar-default ng-scope" role="navigation">
       
    </nav>
</div>
<div class="container">
    <div class="well" layout:fragment="content">
        {% block content %}

        {% endblock %}
    </div>
</div>


<!-- build:js /app/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/jquery-validation/dist/jquery.validate.js"></script>
<script src="/bower_components/json3/lib/json3.js"></script>
<script src="/bower_components/moment/min/moment-with-locales.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<!-- endinject -->
<!-- endbuild -->

<!-- build:js /app/app.js  -->
<!-- inject:js -->
<script src="/app/main.js"></script>
<!-- endinject -->
<!-- endbuild -->


</body>
</html>

页面除了定义的公共的布局外，还使用了gulp-inject进行依赖的自动注入，使用gulp-useref对页面的资源进行合并压缩，还可以使用htmlmin对页面进行压缩，所有gulp构建能用到的特性，理论上都可以应用到模板上。

下面是使用layout的具体页面

bash
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layouts/main}">
<head>
    <title>Home</title>
</head>
<body>
<div layout:fragment="content">
    <!--/*-->
    {% extends "layouts/main.html" %}
    {% block content %}
    <!--*/-->
    <div>
        Index Page
    </div>

    <!--/*--> {% endblock %}<!--*/-->
</div>
</body>
</html>

完全让前端处理模板页面H3

理论上，我们可以完全不用Thymeleaf的layout功能了，因此可以去掉layout:fragment、layout:decorate="~{layouts/main}"等代码。并且让后台构建的时候忽略模板，否则会被覆盖

build.gradle

bash
sourceSets {
    main {
        resources {
            exclude 'src/main/resources/templates/**'
        }
    }
}

只是静态的时候让前端处理H3

但是假设我还是希望使用Thymeaf来完整渲染，swig只是用于前端页面开发的时候以及构建出前端的静态dist包。那么就需要像上面那样，保留Thymeleaf、Swig的指令，并且用Thymeleaf注解忽略Swig的指令（不需要反过来，因为thymeleaf都是属性指令，默认会被忽略）。

用gulp来构建后台模板

目录

痛点H2

模板引擎的选择H2

集成示例H2

完全让前端处理模板页面H3

只是静态的时候让前端处理H3

评论

新的评论

用gulp来构建后台模板

目录

模板引擎的选择H2

集成示例H2

完全让前端处理模板页面H3

只是静态的时候让前端处理H3

评论

新的评论

.css-1hnz6hu{position:static;}.css-1hnz6hu::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}如何高效的使用postman

使用@DateTimeFormat注解转换ZondDateTime

如何高效的使用postman