原文地址:前者火速支付模版
  以前一向在付出移动端的单页面应用,而活动web对品质和成效须求是相比较苛刻的,所以用的都是轻量级的框架序列。基本上是Zepto加自己付出的单页面框架,再添加若干简单的库。那样前端要加载的公文很小,修改起来也万分便利,同时那样的轻量级的系统应用gulp进行自动化管理也是极度得体的。

  自从开发react项目后,对它的工程化和开支方式也是开了见识,标准的框架种类就是重量级的react+redux+webpack。开发大型项目和后台管理连串用react,vue确实是合情合理的。不过付出一些小品种,比如前端h5之类的又有杀鸡用牛刀的感觉到。

  于是借鉴webpack工程化思想出手写了个前端神速支付模版,用于开发火速简洁的项目,比如事先的单页面应用。而以此类型模版就是近乎前端开发的脚手架了,基本的笔触就是自动化和前端编译,主要达到以下目的:

  1. 动用less预编译css,使用autoprefixer举办体制包容
  2. js代码用babel编译,由此可基于es6,es7编纂代码
  3. 类库文件使用npm包,js文件使用browserify社团和包装,不再采取sea,require之类的加载器
  4. html代码应用swig模版引擎举行社团和预编译
  5. 静态资源版本选取rev管理,当css或js文件内容有浮动,打包时自动更新版本
  6. 前端开发基础样式,框架的组成。

工具链

  • 打造工具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文件

2018正版葡京赌侠诗,  我那里有多少个入口文件,能够每天将新入口文件添加到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>

运用办法

  项目模板落成了,我以创建单页面项目为例演示使用的步骤

  1. 第一从github clone模版到文件夹webapp-project,安装相关npm包。

        git clone https://github.com/edwardzhong/project-template.git webapp-project
    
        npm install
    
  2. 在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 ...
    
  3. 在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 ...
    
  4. 在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 %}
    
  5. 运转自动化命令,进行编译,合并,压缩,打包

        npm run build
    
  6. 末尾项目文件都输出到dist文件夹,找到app.html运行即可。

最后

  代码请看https://github.com/edwardzhong/project-template.git

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图