whole

v0.5.7

Published

4 years ago

自动合并分开的html文件，包括其中的style和js标签，是一个html模块化工具

Downloads

0High
0Medium
0Low

songchao

whole

入门

安装whole

node install whole -g
node install whole --save-dev

在项目根目录下创建wholefile.js文件

var whole = require('whole.js');
whole.task({
    html:{
        files:["index.html"],
        dest:"./dist"
    },
    css:{
        cssmin:"cssmin",
        dest:"./dist/css"
    },
    js:{
        jsmin:"uglify",
        dest:"./dist/js"
    }
});

执行

whole

wholefile.js配置

html字段

dest
代表html被解析后保存的路径
files
代表主html页面路径，可以是数组，也可以是一个文件路径

css字段

dest
代表css被解析后保存的路径
cssmin
代表css的压缩插件，可以选择的有"cssmin"

js字段

dest
代表js被解析后的保存路径
jsmin
代表js的压缩插件，可以选择的有"uglify"

#使用说明

通过wholein标签引入代码

<!--index.html-->
<head>
    <style>
        html,body{margin:0;}
    </style>
</head>
<body>
    <h1></h1>
    <wholein src = "child/nav.html"></wholein><!--标签在这-->
<body>

<!--child.html-->
<head>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
    <style>
        a{color:red;}
    </style>
</head>
<body>
    <nav>
        <ul></ul>
    <nav>
<body>

<!--解析后-->
<head>
    <style>
        html,body{margin:0;}
    </style>
    <link rel="stylesheet" href="index.css">
    <style>
        a{color:red;}
    </style>
    <script src="index.js"></script>
</head>
<body>
    <h1></h1>
    <nav>
        <ul></ul>
    <nav>
<body>

主html文件代表就是最终展示给用户看的html文件，子html文件代表的是将被include进主html文件的子文件将主html文件路径填写进配置中，子html将被自动解析，解析规则如下 ###主html页面
主html文件
通过改变type为whole，标识这个位置用来存放所有从子页面解析过来的js文件标签
```
<script type="whole"></script>
```
主页面已经有的带有src或者href属性的标签，如果子页面和主页面有同样的标签，并且此属性的路径一样，那么这个标签将不会被移动到主页面
link标签如上
```
<link type="whole">
```
如果style，link，script标签都没有type="whole"的位置标记标签，那么默认script位置是body之后，其它标签位置是head标签最底部，顺序是按照原来页面中的顺序排列

子html页面

子html页面有两种布局方式，一种是标准html布局,以下为必须标签, 这种方式是为了子页面测试用，解析的时候将忽略html，head和body标签

<html>
    <head>
    </head>
    <body>
    </body>
</html>

另一种是直接写代码方式,没有html，head，body标签

<script></script>
<style>
  
</style>
  
<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

子页面的script标签,有notmove、movebottom、movetop属性，其中notMove只有在标准html的子页面并且标签写在body中才有效，此时标签将保留在html代码中，不会移动到头部或者尾部
movebottom将会把标签移动到head标签中，移动规则参见主html页面说明
movetop将会把标签移动到body元素的最底部

notmove说明

移动前

<!--child.html-->
<html>
    <head>
    </head>
    <body>
        <nav>
            <script notmove src="../index.js"></script>
            <ul>
            </ul>
        </nav>
    </body>
</html>

移动后,位置不变,但是notmove属性会被去掉

<!--index.html-->
<html>
    <head>
    </head>
    <body>
        <nav>
            <script src="../index.js"></script>
            <ul>
            </ul>
        </nav>
    </body>
</html>

movebottom

移动前

<nav>
    <script movebottom src="index.js"><script>
    <ul>
    </ul>
<nav>

移动后

<body>
    <nav>
        <ul>
        </ul>
    </nav>
    <script src="index.js"><script>
</body>

movetop

移动前

<nav>
    <script movetop src="index.js"><script>
    <ul>
    </ul>
<nav>

移动后

<head>
    <script src="index.js"><script>
</head>
<body>
    <nav>
        <ul>
        </ul>
    </nav>
</body>

FAQ

路径问题，所有路径请按照文件所在的路径的相对路径写，软件会自动处理
子页面中也可以使用include另一个页面，但是最终生成的页面只有填写在wholefile.js路径中的页面

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

入门

wholefile.js配置

html字段

css字段

js字段

子html页面

FAQ