one-request

v1.0.1

Published

4 years ago

one request

Downloads

0High
0Medium
0Low

hongru

combo one-request

lib.one

RestToRender Mobile页面的加载性能整体解决方案 One-Request，基于Node/Grunt的自动化Watch和Build，将外联资源可配置的Combo成One-Request Page。实践证明：在Mobile端，合理有效的减少http请求数是极其重要的加载性能优化方法。

Useage

$ npm install -g yo

$ npm install -g generator-onereq

$ yo onereq

接下来，就可以启动grunt进行愉快的编码了。

$ grunt

grunt 默认会启动 watch 模式，less/文件下的less文件会自动编译到build/css/文件下，js/文件夹下的js会自动压缩至build/js/目录下。

$ grunt build

grunt build 会自动将带有 data-onereq 属性并引用本地文件的 <link> 和 <script> 标签自动替换为 css 和js的内容。Combo到html一起。在dest/目录下。

如果你有特殊需求，可以自行去修改增加 Gruntfile.js 和 package.json 的配置。

如果你不想用工程模板，可以直接使用独立的grunt插件 grunt-contrib-onereq

Gruntfile.js 配置类似：

onereq:  {
            options: {
                scriptClass: ['onereq'],
                minify: true
            },
            html: {
                files: [
                    {
                        cwd: './',
                        src: ['*.html', '*.htm'],
                        dest: 'dest/',
                        ext: '.html'
                    }
                ]
            }
        }

Info

$ yo onereq

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |  Create your own Yeoman  |
   `---------´   |      generator with      |
    ( _´U`_ )    |       superpowers!       |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? Would you mind telling me your username on Gitlab? cenan.chr
? What's the base name of your generator? app-test
   create package.json
   create Gruntfile.js
   create .editorconfig
   create .jshintrc
   create .travis.yml
   create README.md
   create .gitattributes
   create .gitignore
   create index.html
   create less/main.less
   create js/main.js
   create test/test-app.js
>> npm install start ...

生成工程模板如下:

|- app-name/
	|- images/
	|- js/
		- main.js
	|- less/
		- main.less
	|- node_modules/
	|- test/
	- .editorconfig
	- .gitattributes
	- .gitignore
	- .jshintrc
	- .travis.yml
	- .yo-rc.json
	- Gruntfile.js
	- index.html
	- package.json
	- README.md

整合了 REM - Flexble 方案的index.html 默认如下

<!DOCTYPE html>
<html>
<head>
    <!--flexible.js/0.2.2-->
    <script type="text/javascript">
        !function(a){function b(){var b=g.getBoundingClientRect().width;b/c>540&&(b=540*c),a.rem=b/16,g.style.fontSize=a.rem+"px"}var c,d,e,f=a.document,g=f.documentElement,h=f.querySelector('meta[name="viewport"]'),i=f.querySelector('meta[name="flexible"]');if(h){console.warn("将根据已有的meta标签来设置缩放比例");var j=h.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);j&&(d=parseFloat(j[2]),c=parseInt(1/d))}else if(i){var j=i.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);j&&(c=parseFloat(j[2]),d=parseFloat((1/c).toFixed(2)))}if(!c&&!d){var k=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),c=a.devicePixelRatio;c=k&&c>=2?2:1,d=1/c}if(g.setAttribute("data-dpr",c),!h)if(h=f.createElement("meta"),h.setAttribute("name","viewport"),h.setAttribute("content","initial-scale="+d+", maximum-scale="+d+", minimum-scale="+d+", user-scalable=no"),g.firstElementChild)g.firstElementChild.appendChild(h);else{var l=f.createElement("div");l.appendChild(h),f.write(l.innerHTML)}a.dpr=c,a.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(b,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(e),e=setTimeout(b,300))},!1),"complete"===f.readyState?f.body.style.fontSize=12*c+"px":f.addEventListener("DOMContentLoaded",function(){f.body.style.fontSize=12*c+"px"},!1),b()}(window);
    </script>
    <!--flexible.css/0.2.2-->
    <style type="text/css">
        @charset "utf-8"; html{overflow-y:scroll}html,body{font-family:sans-serif}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fn-hide{display:none}html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}.grid{box-sizing:content-box;padding-left:.3rem;padding-right:.3rem;margin-left:-.2rem}.grid:before,.grid:after{content:" ";display:table}.grid:after{clear:both}.grid [class^=col-]{margin-left:.2rem;float:left}.grid .col-1{width:1.1rem}.grid .col-2{width:2.4rem}.grid .col-3{width:3.7rem}.grid .col-4{width:5rem}.grid .col-5{width:6.3rem}.grid .col-6{width:7.6000000000000005rem}.grid .col-7{width:8.900000000000002rem}.grid .col-8{width:10.200000000000001rem}.grid .col-9{width:11.500000000000002rem}.grid .col-10{width:12.8rem}.grid .col-11{width:14.100000000000001rem}.grid .col-12{width:15.400000000000002rem}.grid-thin{box-sizing:content-box;padding-left:.4rem;padding-right:.4rem;margin-left:-.4rem}.grid-thin:before,.grid-thin:after{content:" ";display:table}.grid-thin:after{clear:both}.grid-thin [class^=col-]{margin-left:.4rem;float:left}.grid-thin .col-1{width:.9rem}.grid-thin .col-2{width:2.2rem}.grid-thin .col-3{width:3.5000000000000004rem}.grid-thin .col-4{width:4.8rem}.grid-thin .col-5{width:6.1rem}.grid-thin .col-6{width:7.4rem}.grid-thin .col-7{width:8.7rem}.grid-thin .col-8{width:10rem}.grid-thin .col-9{width:11.299999999999999rem}.grid-thin .col-10{width:12.6rem}.grid-thin .col-11{width:13.9rem}.grid-thin .col-12{width:15.200000000000001rem}.grid-fat{box-sizing:content-box;padding-left:.2rem;padding-right:.2rem;margin-left:0rem}.grid-fat:before,.grid-fat:after{content:" ";display:table}.grid-fat:after{clear:both}.grid-fat [class^=col-]{margin-left:0rem;float:left}.grid-fat .col-1{width:1.3rem}.grid-fat .col-2{width:2.6rem}.grid-fat .col-3{width:3.9000000000000004rem}.grid-fat .col-4{width:5.2rem}.grid-fat .col-5{width:6.5rem}.grid-fat .col-6{width:7.800000000000001rem}.grid-fat .col-7{width:9.1rem}.grid-fat .col-8{width:10.4rem}.grid-fat .col-9{width:11.700000000000001rem}.grid-fat .col-10{width:13rem}.grid-fat .col-11{width:14.3rem}.grid-fat .col-12{width:15.600000000000001rem}
    </style>
    <meta charset="utf-8" />
    <!--允许全屏-->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <link rel="apple-touch-icon" href="favicon.png" />
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon" />

    <title>Home</title>

    <link rel="stylesheet" href="./build/css/main.css" data-onereq />

</head>

<body>

    <script type="text/javascript" src="./js/main.js" data-onereq></script>
</body>
</html>

** grunt build **

$ cd app-name
$ grunt build

会自动生成 build/ 和 dest/ 目录。 build/ 目录会把 js/ 和 less/ 目录下的 js 和 less文件分别编译压缩至 build/js/ 和 build/css/ 目录下 dest/ 目录下会自动把根目录下的 .html 和 .htm 文件中引入的带 data-onereq 的 css link 和 js 内容压缩并Combo至 dest/ 目录下。

dest/ 目录下 Combo 后的文件类似

<!DOCTYPE html>
<html><head>
    <!--flexible.js/0.2.2-->
    <script type="text/javascript">
        !function(a){function b(){var b=g.getBoundingClientRect().width;b/c>540&&(b=540*c),a.rem=b/16,g.style.fontSize=a.rem+"px"}var c,d,e,f=a.document,g=f.documentElement,h=f.querySelector('meta[name="viewport"]'),i=f.querySelector('meta[name="flexible"]');if(h){console.warn("将根据已有的meta标签来设置缩放比例");var j=h.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);j&&(d=parseFloat(j[2]),c=parseInt(1/d))}else if(i){var j=i.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);j&&(c=parseFloat(j[2]),d=parseFloat((1/c).toFixed(2)))}if(!c&&!d){var k=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),c=a.devicePixelRatio;c=k&&c>=2?2:1,d=1/c}if(g.setAttribute("data-dpr",c),!h)if(h=f.createElement("meta"),h.setAttribute("name","viewport"),h.setAttribute("content","initial-scale="+d+", maximum-scale="+d+", minimum-scale="+d+", user-scalable=no"),g.firstElementChild)g.firstElementChild.appendChild(h);else{var l=f.createElement("div");l.appendChild(h),f.write(l.innerHTML)}a.dpr=c,a.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(b,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(e),e=setTimeout(b,300))},!1),"complete"===f.readyState?f.body.style.fontSize=12*c+"px":f.addEventListener("DOMContentLoaded",function(){f.body.style.fontSize=12*c+"px"},!1),b()}(window);
    </script>
    <!--flexible.css/0.2.2-->
    <style type="text/css">
        @charset "utf-8"; html{overflow-y:scroll}html,body{font-family:sans-serif}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.fn-hide{display:none}html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}.grid{box-sizing:content-box;padding-left:.3rem;padding-right:.3rem;margin-left:-.2rem}.grid:before,.grid:after{content:" ";display:table}.grid:after{clear:both}.grid [class^=col-]{margin-left:.2rem;float:left}.grid .col-1{width:1.1rem}.grid .col-2{width:2.4rem}.grid .col-3{width:3.7rem}.grid .col-4{width:5rem}.grid .col-5{width:6.3rem}.grid .col-6{width:7.6000000000000005rem}.grid .col-7{width:8.900000000000002rem}.grid .col-8{width:10.200000000000001rem}.grid .col-9{width:11.500000000000002rem}.grid .col-10{width:12.8rem}.grid .col-11{width:14.100000000000001rem}.grid .col-12{width:15.400000000000002rem}.grid-thin{box-sizing:content-box;padding-left:.4rem;padding-right:.4rem;margin-left:-.4rem}.grid-thin:before,.grid-thin:after{content:" ";display:table}.grid-thin:after{clear:both}.grid-thin [class^=col-]{margin-left:.4rem;float:left}.grid-thin .col-1{width:.9rem}.grid-thin .col-2{width:2.2rem}.grid-thin .col-3{width:3.5000000000000004rem}.grid-thin .col-4{width:4.8rem}.grid-thin .col-5{width:6.1rem}.grid-thin .col-6{width:7.4rem}.grid-thin .col-7{width:8.7rem}.grid-thin .col-8{width:10rem}.grid-thin .col-9{width:11.299999999999999rem}.grid-thin .col-10{width:12.6rem}.grid-thin .col-11{width:13.9rem}.grid-thin .col-12{width:15.200000000000001rem}.grid-fat{box-sizing:content-box;padding-left:.2rem;padding-right:.2rem;margin-left:0rem}.grid-fat:before,.grid-fat:after{content:" ";display:table}.grid-fat:after{clear:both}.grid-fat [class^=col-]{margin-left:0rem;float:left}.grid-fat .col-1{width:1.3rem}.grid-fat .col-2{width:2.6rem}.grid-fat .col-3{width:3.9000000000000004rem}.grid-fat .col-4{width:5.2rem}.grid-fat .col-5{width:6.5rem}.grid-fat .col-6{width:7.800000000000001rem}.grid-fat .col-7{width:9.1rem}.grid-fat .col-8{width:10.4rem}.grid-fat .col-9{width:11.700000000000001rem}.grid-fat .col-10{width:13rem}.grid-fat .col-11{width:14.3rem}.grid-fat .col-12{width:15.600000000000001rem}
    </style>
    <meta charset="utf-8">
    <!--允许全屏-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">

    <title>Home</title>

    <style>body{padding:0;margin:0}</style>

</head>

<body>

    <script type="text/javascript">!function(){console.log("let's start!")}();</script>

</body></html>

One-Request的特性

整合无线最新rem方案，直接在640宽的设计稿内量出设计尺寸a，less中对应尺寸直接a/40rem 即可。方便快捷适配所有mobile机型
Combo资源可选择性配置
images/下被less引用的图片将自动批量无损压缩，然后上传至cdn，并自动替换为绝对路径，省下太多力气【待完成...】
根目录下的html文件自动检查，独立Combo
同时完整兼容gitlab发布方案，css/*.less 和 src/*.js 经过编译和压缩后，会自动build至 build/ 目录下。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

lib.one

Useage

如果你不想用工程模板，可以直接使用独立的grunt插件 grunt-contrib-onereq

Info

One-Request的特性