landingpage

Banner
form
content
footer

前情说明：

   以往虽然已经基于落地页面做了相应的通用js和css以及html，但是新落地页面开发的时候还是牵涉到相关js内的一些修改以及css的拷贝修改及html的拷贝，为了更精简的处理这些工作，一劳永逸的减少相应的开发时间。 特此进行landingpage的通用模版化及自动化配置部署，经思考按照两部走的战略：1.实现本地自动化配置构建模版化，2.实现cms配置自动化部署。

落地页异同部分（如图）

本地本地自动化配置构建模版化方式

1. 分拆页面内容（作为子模版）

2. 提取不同部分条件（同时抽取需要修改的变量及css到模版可修改区域）

3. 组装不同页面模版（根据不同条件判断）

4. 创建构建任务（选择模版，插入条件内容，设置生成目录）

5. 生成页面

技术实现方式步骤

1. 安装依赖插件

   npm install art-template --save-devnpm install gulp-html-tpl --save-dev

2. 创建gulp任务配置js文件:./gulpfile.js/config/component.js

    var config = require\('./'\)
    module.exports = {  
      watch: config.sourceDirectory + '/views/component/\*.html',  
      watchTasks: config.gulpTasks + '/component.js',    src: \[config.sourceDirectory + '/views/component/\*.html'\],  
      baseSrc: \[config.sourceDirectory + '/views/component/'\],  
      tlpSrc: config.sourceDirectory + '/views/template',               dest: config.publicDirectory,  
      assets: config.publicAssets,
    }

1. 创建gulp任务执行js文件:./gulpfile.js/tasks/component.js

   var config = require('../config/component');
   var gulp = require('gulp');
   var browserSync = require('browser-sync');
   const htmltpl = require('gulp-html-tpl');
   const artTemplate = require('art-template');
   var gulpSequence = require('gulp-sequence');
   var del = require('del');
   const pageBaseConfig = {  
     title: '好分期', //title内容  
     useImgVerify: true,//是否使用图形验证码  
     useLoginTips: true,//是否使用提示登录部分  
     useContent: true,//是否使用内容区域              contentType:'1',//额外内容区域dom内容  
     useToutiao: false,//是否使用头条js  
     toutiaoId: '',//头条上报的convert\_id    useGdtRecordMedium: false, //使用广点通根据utm\_medium修改  gdtId的js代码  
     useGdt: false, //使用广点通嵌入js（需配置gdtId）    backgroundColor: '', //页面背景颜色  
     backgroundImg: '',//页面背景图片  
     bannerImg: '',//banner图片地址  
     bannerImgTop: '0',//banner图片距离顶部  
     formPadding: '0',//form区域距离顶部    codeBackgroundColor: '',//验证码背景颜色  
     codeBorderColor: '\#05c84a',//验证码边框颜色  
     codeColor: '\#05c84a',//验证码字体颜色    protocolUncheckImg: '../asset/images/reg/unselected.png',//协议未勾选img图片地址    protocolcheckedImg: '../asset/images/reg/selected.png',//协议已勾选img图片地址  
     copyright: 'Copyright ©2017 All Rights Reserved',//copyright信息（相关主体修改，因长度等原因反馈UI分行显示）  
     company: '人人贷金融信息服务\(北京\)有限公司 京ICP备16006481号-1',//公司信息  
     regText: '立即注册',//注册按钮文本  
     regColor: '\#330d3e',//注册按钮颜色  
     regBgColorStart: '\#fed242',//注册按钮背景颜色/渐变颜色的开始颜色\(适配从上到下两种颜色的渐变色\)  
     regBgColorStop: '\#f6b03c',//注册按钮背景颜色/渐变颜色的结束颜色（如无渐变，
     regBgColorStart和regBgColorStop值相同）
 };

 /* 模版构建页面核心函数 
  * @param {string} pageName 页面名称 
  * @param {string} dest  输出目录 
  * @param {object} pageConfig 页面模版所需参数配置 
 */
 function buildPage(pageName, dest, pageConfig) {  
   if (typeof dest === 'object') {    
      pageConfig = dest;    dest = pageName;  
   }  
   let destDir = dest;  
   const _config = {};  
   Object.assign(_config, pageBaseConfig, pageConfig);  
   gulp.src(config.baseSrc + '/' + pageName + '.html')     .pipe(htmltpl({      
   tag: 'template',      
   paths: [config.tlpSrc],      
   engine: function (template, data) {        
    return artTemplate.compile(template)(data)      
   },      
   data: _config,      
   beautify: {  
    indent_char: ' ',        
    indent_with_tabs: false      
   }    
 }))
.pipe(gulp.dest(config.dest + '/' + destDir))    .pipe(browserSync.reload({ stream: true }));
}

gulp.task('component', function () {  
//添加任务区域  
//reg_gdt_v0.1.0.c1  
buildPage('reg', 'reg_gdt_v0.1.0.c1', {    useGdtRecordMedium: true,   
backgroundColor: '#3b2193',    
bannerImg: '../asset/images/reg/reg_top_50000_gdt.png',    codeBackgroundColor: '#5c4fa9',    
codeBorderColor: '#fdce42',    
codeColor: '#fdce42',    
protocolcheckedImg: '../asset/images/reg/selected_y.png',    
regColor: '#331f92',    
regBgColorStart: '#ffd443',    
regBgColorStop: '#f19c39',  
});  

//reg_gdt_v0.1.1  
buildPage\('reg', 'reg_gdt_v0.1.1', {    
  title: '好分期',     
useContent: true,    
useGdt: true,    
gdtId: '1106982580',    
backgroundColor: '#3b2193',    
bannerImg: '../asset/images/reg/reg_top_50000\_gdt.png',    codeBackgroundColor: '#5c4fa9',    
codeBorderColor: '#fdce42',    
codeColor: '#fdce42',    
protocolcheckedImg: '../asset/images/reg/selected_y.png',    
regColor: '#331f92',    
regBgColorStart: '#ffd443',    
regBgColorStop: '#f19c39',  
});

});

1. 添加gulp执行任务component,修改目录：./gulpfile.js/tasks/build-development.js

   var gulp = require('gulp');
   var runSequence = require('run-sequence');
   gulp.task(
    'build:development', 
    function(cb) {  
      runSequence('clean', 
        ['images', 'vendor', 'extenal_resource'], 
        ['less', 'css', 'webpack:development', 'html', 'component'], 
        ['server'], 
        ['watch'], 
      cb);
     }
    )

1. 修改html.js排除component,template模版目录构建为html：./gulpfile.js/config/html.js

   var config = require\('./'\)module.exports = {  watch: config.sourceDirectory + '/views/\*\*/\*.html',  src: \[config.sourceDirectory + '/views/\*\*/\*.html', '!\*\*/{layouts,shared,component,template}/\*\*'\],  dest: config.publicDirectory,  swig: {    defaults: { cache: false }  }}

1. 创建组装页面模版：./app/views/component/reg.html

    <template src="head.html"></template>
    <template src="main.html"></template>
    {{if useContent}}
      <template src="content.html"></template>
    {{/if}}
    <template src="footer.html"></template>

1. 创建各分拆子模版：./app/views/template (部分模版未放置，详见代码)

   <!DOCTYPE html > 
<html> 
<head> 
<title> { { title } } </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!--iOS中隐藏Safari浏览器的UI:Start-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--iOS中隐藏Safari浏览器的UI:End--><!--iOS Safari对页面数字禁用拨号功能:Start--><meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<!--iOS Safari对页面数字禁用拨号功能:End--><meta http-equiv="Content-Type" content="text/html;
charset = utf - 8 ">
<meta name="
keywords" content="">
<meta name="description " content="好分期 ">
<meta http-equiv="Cache - Control " content="no-transform ">
<meta name="flexible " content="initial - dpr = 2 "/>
<script src=".. / asset / js / flexible.js " async></script>
<link rel="
stylesheet " type="
text / css " href=".. / asset / css / common / reg.css ">
<link rel="
stylesheet " href=".. / asset / css / h5 / verify_pop.css ">
<style> 
html body{ background-color :'{{backgroundColor}}'; 
font-weight: lighter; height: inherit; 
} 
body{ 
    width: 100%; /* height: 16.106667rem; */ 
background: url({{backgroundImg}});
 background-size: 100% 100%; 
 background-repeat: no-repeat; 
 background-position: 0 0; 
 } 
 .imgUrl img{ margin-top: {{bannerImgTop}}; width: 100%; height: auto; }
  .form-container { padding-top: {{formPadding}}; } 
  .form-item-2 .btn-code-wrapper{ float: right; width: 40%; text-align: center; font-size: 0.373333rem; background: {{codeBackgroundColor}}; border: 1px solid {{codeBorderColor}}; height: 1.2rem; line-height: 1.2rem; -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 和 Chrome */ border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ } .btn-code-wrapper a.getCode{ width: 100%; font-weight: normal; color: {{codeColor}}; } .btn-code-wrapper a:hover{ text-decoration: none; } .protocalCheck{ height: 0.466667rem; width: 0.466667rem; background: url({{protocolUncheckImg}}) 0 0 no-repeat ; background-size: 100%; border: 0; position: absolute; } .protocalChecked{ height: 0.466667rem; width: 0.466667rem; background: url({{protocolcheckedImg}}) 0 0 no-repeat; background-size: 100%; } </style><script></script> {{if useToutiao}} <script type="
text/javascript "> let convertId = {{toutiaoId}}; console.log('convertId',convertId); (function (root) { root._tt_config = true; var ta = document.createElement('script'); ta.type = 'text/javascript'; ta.async = true; ta.src = document.location.protocol + '//' + 's3.pstatp.com/bytecom/resource/track_log/src/toutiao-track-log.js'; // ta.onerror = function () { var request = new XMLHttpRequest(); var web_url = window.encodeURIComponent(window.location.href); var js_url = ta.src; var url = '//ad.toutiao.com/link_monitor/cdn_failed?web_url=' + web_url + '&js_url=' + js_url + '&convert_id=' + convertId; request.open('GET', url, true); request.send(null); // } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ta, s); })(window); </script> {{/if}} {{if useGdtRecordMedium}} <template src="
gdt_record_medium.html "></template> {{/if}} {{if useGdt}} <script> !function(g,d,t,e,v,n,s){if(g.gdt)return;v=g.gdt=function(){v.tk?v.tk.apply(v,arguments):v.queue.push(arguments)};v.queue=[];n=d.createElement(t);n.async=!0;n.src=e;s=d.getElementsByTagName(t)[0];s.parentNode.insertBefore(n,s);}(window,document,'script','//qzonestyle.gtimg.cn/qzone/biz/gdt/dmp/user-action/gdtevent.min.js'); gdt('init','{{gdtId}}'); gdt('track','PAGE_VIEW'); </script><noscript><img height="
1 " width="
1 " style="
display: none " src="
https: //a.gdt.qq.com/pixel?user_action_set_id={{gdtId}}&action_type=PAGE_VIEW&noscript=1"/><oscript> {{/if}}</head><body ontouchstart><／body>
</html>

<div class="money-source">
    <div class="gray-line"></div>
    <div class="gray-line"></div>
    <p>资金由黑卡小贷平台提供<br>并有银行进行资金存管</p>
</div>

<div style="position: fixed;top:0;bottom:0;right: 0;left:0;background-color :{{backgroundColor}};z-index: -1;">
</div>
<div class="center company-info"> {{copyright}}</div>
<div class="center company-info mb-40"><span>{{company}}</span></div>
</div></div>
<script src="../asset/lib/jquery/jquery.min.js"></script>
<script src="../asset/lib/aes.js"></script>
<script src="//pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="../asset/js/h5/reg\_common\_3.1.2.js"></script>
</body></html>

1. 根据新增需求新增子模版及判断显示条件抽取

构建新落地页面步骤：

1. component任务内新增构建页面调用

   //新增reg_gdt_v3.0/reg.html buildPage('reg', 'reg_gdt_v3.0', { backgroundColor: '#EE6325', backgroundImg: '../asset/images/reg/reg_1_bg.png', bannerImg: '../asset/images/reg/reg_1_rate_gdt.png', bannerImgTop: '.933333rem', formPadding: '.666667rem', protocolcheckedImg: '../asset/images/reg/reg_1_selected.png', });

2. 执行构建命令

   npm run dev

插件使用：https://www.npmjs.com/package/gulp-html-tpl