Coder Social home page Coder Social logo

lilizing / demo-builder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kelvshi/demo-builder

0.0 1.0 0.0 1.18 MB

这是一个静态html模块化构建方案,主要解决没有服务端语言支持的情况下,静态html文件的模块抽象问题。

License: MIT License

CoffeeScript 7.07% JavaScript 12.12% CSS 70.98% HTML 9.83%

demo-builder's Introduction

demo-builder

这是一个静态html模块化构建方案,主要解决没有服务端语言支持的情况下,静态html文件的模块抽象问题。

主要功能

  • 1 基于静态html的demo模块化构建方案,支持内嵌图片资源的定位功能(img带MD5戳)
  • 2 基于LESS的CSS模块化构建方案(暂未包含雪碧图的自动构建功能在内)
  • 3 静态CSS和JS的优化压缩,支持内嵌图片资源的定位功能,(同上)
  • 4 开发状态下的watch即时编译功能,同一份源文件连续按ctrl+s保存,3秒内视为一次保存
  • 5 内置一款静态开发的web服务器

使用

构建流程

静态的模板语法:

//1,@@include包含子模板,子模板为相对路径,可以传参
//2,参数通过 @@ 来实例,当参数名字为css或js时,可以替换为html的路径引用
//3,html内嵌img可通过 {{staticPath}} 来输出路径引用,当然也可以直接相对路径
//4,在非开发状态下,html包含的 img、css和js可转化为带有md5戳的路径引用
//5,发布到CDN解决缓存和覆盖式发布问题,但这需结合后端模板,静态开发不需要

//这是主模板的内容-->
@@include("./_common/head.html",{ 
        "title":"后台管理", 
        "css":"pintuer.css,admin.css" 
    })
@@include("./_common/footer.html",{
     "js":"jquery.js,pintuer.js,respond.js,admin.js" 
})

//这是子模板的内容-->
<title>@@title</title>
<!-- css -->
@@css
<!-- /css -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
<link href="/favicon.ico" rel="bookmark icon" />
<body>
    <img src="{{staticPath}}/img/logo.png" alt="">
    <img src="../img/test.jpg" alt="">
</body>

构建流程

构建流程

LESS编译为CSS的说明:

构建流程

静态html模块化开发的建议:

构建流程

  • 1,less和html源文件尽可能碎片化;
  • 2,less和html的模块最好一一对应。

部署

下载

git clone https://github.com/lmtdit/demo-builder.git

初始化

gulp init

开发

gulp 
// or 
gulp dev 
// or
gulp --e dev

发布

//发布到测试环境
gulp --e test

//发布到预生产环境
gulp --e pre

//发布到生产环境
gulp --e www

License

MIT.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.