前者连忙支付模版
原文地址:前端快捷支付模版
以前一贯在开发移动端的单页面应用,而活动web对质量和意义要求是相比苛刻的,所以用的都是轻量级的框架连串。基本上是Zepto加本身开销的单页面框架,再拉长若干简单的库。那样前端要加载的文书很小,修改起来也丰裕有利于,同时那样的轻量级的系统应用gulp进行自动化管理也是万分适用的。
自从开发react项目后,对它的工程化和支付形式也是开了眼界,标准的框架系列就是重量级的react+redux+webpack。开发大型项目和后台管理体系用react,vue确实是不错的。可是付出一些小项目,比如前端h5之类的又有杀鸡用牛刀的感到。
于是借鉴webpack工程化思想入手写了个前端连忙支付模版,用于支付快捷简洁的连串,比如前边的单页面应用。而以此项目模版就是近似前端开发的脚手架了,基本的思绪就是自动化和前端编译,紧要达到以下目的:
- 应用less预编译css,使用autoprefixer进行体制包容
- js代码用babel编译,由此可基于es6,es7编制代码
- 类库文件使用npm包,js文件使用browserify社团和打包,不再使用sea,require之类的加载器
- html代码应用swig模版引擎举办集团和预编译
- 静态资源版本采取rev管理,当css或js文件内容有转变,打包时自动更新版本
- 前端开发基础样式,框架的重组。
工具链
- 创设工具gulp
- 编译打包工具browserify
- 代码编译babel
- css兼容autoprefixer
- css预编译less
- html代码预编译模版swig
- 前者代码版本更新rev
国有类库
- jQuery
- Zepto
- 祥和支付的简洁单页面框架app.js
- 图标fontello
- 字体reboto
- 基础样式base.css
文件目录结构
- css: css文件
- less: less文件
- js: js文件
- dist: 打包生成的门类文件
- layout: html母板
- lib: 公共类库
- template: html页面
品种自动化
没有动用重量级的webpack,而是选择轻量级的gulp和browserify
公物类库
公共类库的公文,主要有根基样式base.css,图标样式reboto,字体样式fontello,单页面框架app,直接拷贝到dist文件就ok。其他npm包跟nodejs项目一律在node_modules中,不须求处理。
//复制公共库目录下的所有内容
gulp.task('copy',function(){
return gulp.src('./lib/**')
.pipe(gulp.dest('./dist/lib/'));
});
css文件
首先将less文件转为css,用autoprefixer添加包容性前缀,合并压缩,放到dist目录,最终用rev插件生成版本信息,那么些后边用于替换更新链接用。
//编译css,添加兼容后缀,压缩
gulp.task('css', function() {
return gulp.src('./less/*.less')
.pipe(less())
// .pipe(concatCss("index.css"))
.pipe(postcss([ autoprefixer({
"browsers": ["last 2 version", "> 0.5%", "ie 6-8","Firefox < 20"]
// "browsers": ["last 2 version", "> 0.1%"]
})
]))
.pipe(cleanCSS())
// .pipe(rename({suffix: '.min'}))
// .pipe(gulp.dest('./dist/css'));
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'));
});
js文件
我这里有三个输入文件,可以天天将新入口文件添加到scripts数组中,那里做的就是应用babel转换代码,然后将表面文件,npm包打包进去,生成sourcemap,输出到dist文件夹,最终一样用rev插件生成版本音讯。
var scripts=['app','index'];
scripts.map(name=>{
gulp.task(name,function(){
return browserify({
entries:'./js/'+name+'.js', //entries file name
debug:true // set true so the bundle file can generate sourcemap
})
.transform(babelify,{
plugins: ["transform-runtime"],
presets: [
'es2015', //convert to es5
'stage-0' //es7
]
})
.bundle() //merge
.pipe(source(name+'.js'))
.pipe(buffer())
// .pipe(uglify())
.pipe(sourcemaps.init({loadMaps: true})) //External sourcemap file
.pipe(sourcemaps.write('./'))
.pipe(rev())
.pipe(gulp.dest('./dist/js/'))
.pipe(rev.manifest(name+'.json'))
.pipe(gulp.dest('./rev/js/'));
});
});
html文件
html编译我利用的是模版引擎是swig,那里用的是gulp-swig插件,当然也足以用ejs或jade的引擎。但我个人相比习惯用swig,因为它更灵活,帮衬各样文件格式,可以从来动用html文件,也支撑ejs不协助的layout等。gulp-swig插件的利用也非凡不难。
//swig编译输出html
gulp.task('html', function() {
return gulp.src('./template/*.html')
.pipe(swig({
defaults: {cache: false }
}))
.pipe(gulp.dest('./'))
});
文本版本控制
以前编译css和js的时候曾经调用rev生成了笔录了版本新闻的json文件,固然情节有变动它会扭转新的md5文件名。那里就是用rev-collector替换html文件中除md5部卓殊相同文件名的链接,那样就就兑现了本子更新功效,用那些插件可以立异css,js,图片等的本子。
//更新css和js版本,同时替换html中的链接标签
gulp.task('rev', scripts.concat(["css","html"]),function () {
return gulp.src(['./rev/**/*.json', './*.html'])//add md5 suffix to js and css file, replace the link of html as well
.pipe( revCollector({
replaceReved: true,
dirReplacements: {
'/css': '/css',
'/js': '/js'
}
}))
.pipe( gulp.dest('./dist') );
});
html里面替换后的链接格式如下
<link rel="stylesheet" href="./css/app-d333f590b0.css">
<script src="./js/app-62bad8e549.js"></script>
花色模版
项目自动化配置完后,接着就是配置项目模版了,那里分两种档次的模板:1.移动端优先的单页面;2.pc端优先的日常页面。
swig标签语法
- extends 继承父模板,必须在文件最前
- block 定义一个块,使之可以被持续的模版重写,或然重写父模板的同名块
- parent 将父模板中同名块注入当前块中
- include 包罗一个模板到近年来岗位
移动端单页面模版
在layout文件夹新建移动端的单页面模版app-layout.html,然后再建立子目录partial,用于存放公共代码块。
大家知晓加载页面时再去加载外部文件是亟需消耗加载时间,而页面直出可以大大进步加载速度,同时先行加载部分样式也足以幸免加载时的白屏难题。这也是大家那里将公共部分的js和css以代码块的形式嵌入到html文件中,达到页面直出的职能。
swig支持将html文件嵌入,同时也得以将css文件嵌入,我那里就是把单页面样式文件app.css和底蕴样式文件app-base.css的内容平素出口到style标签中。紧要的代码块有:
- meta.html: 头部meta标签
- header-script.html: 首若是动态设置fontsize大小的剧本
- footer-script.html: 重即使页面加载进程的动画脚本
当然了图标样式,雅观的书体文件,单页面的css,基础的样式css都有,
同时母版还挖出了多少个block给后续的页面进行重写,比如block title,block
css,block js,内容block
content。css块和js块既可以写外部链接也足以直接写代码。
大家可以依照自个儿的须要开展改动和配备文件,具体内容看如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
{% include './partial/meta.html' %}
<!-- 页面内加载的头部js -->
{% include './partial/header-script.html' %}
<!-- 页面内加载的css -->
<style>{% include '../lib/app/app.css' %}{% include '../lib/app-base.css' %}</style>
<!-- 图标 -->
<link rel="stylesheet" href="./lib/fontello/fontello.css">
<!-- 字体 -->
<link rel="stylesheet" href="./lib/reboto/roboto.css">
<!-- 项目css -->
<link rel="stylesheet" href="./css/app.css">
<!-- 外部css块 -->
{% block css %}{% endblock %}
</head>
<body>
<div id="app" class="view-wrap"></div>
<div id="loading" class="loading-wrap">
<div class="loading">
<div class="round"></div>
<div class="txt">0%</div>
</div>
</div>
<div id="freshing" class="fresh-wrap">
<div class="loading">
<div class="round"></div>
<p class="txt">loading...</p>
</div>
</div>
<!-- 内容填充块 -->
{% autoescape false %}
{% block content %}{% endblock %}
{% endautoescape %}
<!-- 页面内加载的尾部js -->
{% include './partial/footer-script.html' %}
<!-- 外部js块 -->
{% block js %}{% endblock %}
</body>
</html>
PC端优先模版
接着就是建立PC端优先的沙盘layout.html,这么些和单页面模版相似,紧要分化就是基础样式,同时不要嵌入移动端的代码,页面模版请看如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
{% include './partial/meta.html' %}
<link rel="stylesheet" href="./lib/fontello/fontello.css">
<link rel="stylesheet" href="./lib/reboto/roboto.css">
<style>{% include '../lib/base.css' %}</style>
<link rel="stylesheet" href="./css/index.css">
{% block css %}{% endblock %}
</head>
<body>
{% autoescape false %}
{% block content %}{% endblock %}
{% endautoescape %}
{% include './partial/copyright.html' %}
{% block js %}{% endblock %}
</body>
</html>
应用方法
项目模板达成了,我以建立单页面项目为例演示使用的步调
-
先是从github clone模版到文件夹webapp-project,安装相关npm包。
git clone https://github.com/edwardzhong/project-template.git webapp-project npm install
-
在less文件夹内建立app.less,并编辑代码
@lightBlue:hsl(198, 73%, 53%); // base html,body{ font-family: "Roboto", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 0.25rem; color: #555; width: 100%; height: 100%; } body,p,h1,h2,h3,h4,h5,h6{margin:0;} ul,ol{list-type:none; margin:0; padding:0;} // todo more ...
-
在js文件夹建立app.js并编辑代码, 使用es6写代码就是舒服
require('../lib/zepto.js');// zepto没有使用CommonJs规范,修改后使用require引入 import { webApp } from '../lib/app/app.js' var App=webApp({ container:'app', animate:{ effects:['slideInRight', 'slideOutLeft'],delay:600}, preLoad:function(){ }, aftLoad:function(){ loadPercent(100); } }) .other('/index',{temId:'tempIndex',create:createIndex}) .when('/button',{temId:'tempButton'}) .when('/form',{temId:'tempForm'}) .when('/dialog',{temId:'tempDialog',create:createDialog}) .init(); // todo: more ...
-
在template文件夹建立app.html,引用单页面模板app-layout.html,并编写内容,我这边把单页面的顺序视图代码也以代码块的法子引入。
{% extends '../layout/app-layout.html' %} {% block title %}Web App{% endblock %} {% block js %} <script src="./js/app.js"></script> {% endblock %} {% block content %} {% include './partial/index.html' %} {% include './partial/button.html' %} {% include './partial/dialog.html' %} {% include './partial/form.html' %} {% endblock %}
-
运作自动化命令,举办编译,合并,压缩,打包
npm run build
-
说到底项目文件都输出到dist文件夹,找到app.html运行即可。