├── .gitattributes
├── .gitignore
├── .npmignore
├── README.md
├── example
    ├── assets
    │   ├── css
    │   │   ├── a.css
    │   │   └── b.css
    │   └── js
    │   │   ├── a.js
    │   │   ├── b.js
    │   │   └── c.js
    ├── dist
    │   ├── inline.html
    │   ├── inlineCss.html
    │   ├── inlineJs.html
    │   ├── inlineScript.html
    │   └── inlineStyle.html
    ├── gulpfile.js
    ├── inline.html
    ├── inlineCss.html
    ├── inlineJs.html
    ├── inlineScript.html
    ├── inlineStyle.html
    └── test.js
├── index.js
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .idea
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | #node js
 6 | #=======================================
 7 | 
 8 | node_modules
 9 | example
10 | npm-debug.log
11 | 
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # gulp-html-inline
 2 | 
 3 | [![NPM version][npm-image]][npm-url]
 4 | [![Downloads][downloads-image]][downloads-url]
 5 | ![cise](http://cise.alibaba-inc.com/task/69703/status.svg)
 6 | 
 7 | [npm-image]: https://img.shields.io/npm/v/gulp-html-inline.svg?style=flat-square
 8 | [npm-url]: https://npmjs.org/package/gulp-html-inline
 9 | [downloads-image]: http://img.shields.io/npm/dm/gulp-html-inline.svg?style=flat-square
10 | [downloads-url]: https://npmjs.org/package/gulp-html-inline
11 | 
12 | combo and minify `css` and `js` to html. no matter the file is online or not.
13 | 
14 | ## Features
15 | 
16 | + css、js自动内联
17 | + css、js可选择压缩
18 | + css、js文件的url上query为 "_toinline"，即表示内联
19 | + css、js文件的url上query为 "_tohash"，即表示获取文件MD5值作为缓存版本号
20 | 
21 | ## Usage
22 | 
23 | ```javascript
24 | var gulp = require('gulp');
25 | var htmlInline = require('gulp-html-inline');
26 | 
27 | gulp.src('inline.html')
28 |     .pipe(htmlInline({ minifyJs: true }))
29 |     .pipe(gulp.dest('dist'));
30 | ```
31 | 
32 | ## Html
33 | ```html
34 |     <!-- link tag -->
35 |     <link rel="stylesheet" href="assets/css/a.css?_toinline"/>
36 |     <link rel="stylesheet" href="assets/css/b.css?_tohash"/>
37 | 
38 |     <!-- style tag -->
39 |     <style>
40 |         #content{
41 |             padding: 20px;
42 |             border: 1px solid rgba(0,0,0,.3);
43 |             -webkit-border-radius: 4px;
44 |             -moz-border-radius: 4px;
45 |             border-radius: 4px;
46 |         }
47 |     </style>
48 | 
49 |     <!-- script tag -->
50 |     <script src="assets/js/a.js?_toinline"></script>
51 |     <script src="assets/js/b.js?_toinline"></script>
52 |     <script src="assets/js/c.js?_tohash" ></script>
53 |     <script>
54 |         var a = 0,
55 |             b = 1;
56 |         var arr = [];
57 |         arr.push(a);
58 |         arr.push(b);
59 |     </script>
60 | 
61 | ```
62 | ## Options
63 | ```javascript
64 | gulp.src('./src/*.html')
65 |         .pipe(htmlInline({
66 |             queryKey: '_rvc',       //指定需要内联的url后面必须带缓存query key， 默认 _rvc
67 |             toInline: '_toinline',  //指定需要内联的url后面必须带的query key， 默认 _toinline
68 |             toHash: '_tohash',      //指定需要内联的url后面必须带的query key， 默认 _toinline
69 |             hashSize: 8,            //指定hash值长度，默认 8
70 |             minifyJs: true          //选择是否压缩js,
71 |             //资源文件路径
72 |             basePath: '../'
73 |         }))
74 | // ...
75 | ```
76 | 
77 | #License
78 | ISC
79 | 


--------------------------------------------------------------------------------
/example/assets/css/a.css:
--------------------------------------------------------------------------------
 1 | .layout{
 2 |     background-color: white;
 3 |     font-family: "Microsoft YaHei";
 4 |     font-size: 1.2em;
 5 |     color: #000;
 6 | }
 7 | .layout .content{
 8 |     width: 100%;
 9 |     height: 100%;
10 |     padding: 0px;
11 |     position: relative;
12 | }
13 | .layout .content .left{
14 |     position: absolute;
15 |     left: 0;
16 |     top: 0;
17 |     width: 35%
18 |     height: 100%;
19 | }
20 | .layout .content .right{
21 |     position: absolute;
22 |     right: 0;
23 |     top: 0;
24 |     width: 65%;
25 |     height: 100%;
26 | }


--------------------------------------------------------------------------------
/example/assets/css/b.css:
--------------------------------------------------------------------------------
 1 | .app{
 2 |     background-color: powderblue;
 3 |     font-family: "Microsoft YaHei";
 4 |     font-size: 1.2em;
 5 |     color: #555;
 6 | }
 7 | .app .content{
 8 |     width: 100%;
 9 |     height: 100%;
10 |     padding: 10px 20px;
11 | }
12 | .app .content > p{
13 |     font-size: inherit;
14 |     color: orange;
15 |     line-height: 1.65em;
16 | }


--------------------------------------------------------------------------------
/example/assets/js/a.js:
--------------------------------------------------------------------------------
 1 | ;(function(){
 2 | 
 3 |     'use strict';
 4 | 
 5 |     var SYST = function(){
 6 |         this.name = 'Rodey';
 7 |     };
 8 | 
 9 |     window.SYST = new SYST();
10 | 
11 | }).call(this);
12 | 


--------------------------------------------------------------------------------
/example/assets/js/b.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Rodey on 2015/11/5.
 3 |  */
 4 | 
 5 | 
 6 | window.onload = function(){
 7 | 
 8 |     console.log(SYST);
 9 | 
10 | };
11 | 


--------------------------------------------------------------------------------
/example/assets/js/c.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by Rodey on 2015/11/5.
3 |  */
4 | 
5 | document.body.addEventListener('click', function(evt){
6 |     var text = document.querySelector('#content').innerHTML;
7 |     alert(text);
8 | }, false);
9 | 


--------------------------------------------------------------------------------
/example/dist/inline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title></title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <style charset="utf-8" type="text/css">.layout{background-color:white;font-family:"Microsoft YaHei";font-size:1.2em;color:#000}.layout .content{width:100%;height:100%;padding:0;position:relative}.layout .content .left{position:absolute;left:0;top:0;width:35% height:100%}.layout .content .right{position:absolute;right:0;top:0;width:65%;height:100%}</style>
12 |     <style charset="utf-8" type="text/css">.app{background-color:powderblue;font-family:"Microsoft YaHei";font-size:1.2em;color:#555}.app .content{width:100%;height:100%;padding:10px 20px}.app .content>p{font-size:inherit;color:orange;line-height:1.65em}</style>
13 |     <style>*{padding:0;margin:0}html,body{width:100%;height:100%}body{font-size:1.2em;-webkit-user-select:none;-webkit-appearance:none}</style>
14 |     <style>#content{padding:20px;border:1px solid rgba(0,0,0,.3);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}</style>
15 | </head>
16 | <body>
17 | 
18 |     <div class="app product-app details" id="app">
19 | 
20 |         <div class="content">
21 |             <p id="content">
22 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
23 |             </p>
24 |         </div>
25 | 
26 |     </div>
27 | 
28 |     <script charset="utf-8" type="text/javascript" defer>;(function(){'use strict';var SYST=function(){this.name='Rodey';};window.SYST=new SYST();}).call(this);</script>
29 |     <script charset="utf-8" type="text/javascript" defer>window.onload=function(){console.log(SYST);};</script>
30 |     <script src="assets/js/c.js?_rvc=60f2ab86"></script>
31 |     <script>var a=0,b=1;var arr=[];arr.push(a);arr.push(b);</script>
32 | 
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/example/dist/inlineCss.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>替换并压缩link链接</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <style charset="utf-8" type="text/css">.layout{background-color:white;font-family:"Microsoft YaHei";font-size:1.2em;color:#000}.layout .content{width:100%;height:100%;padding:0;position:relative}.layout .content .left{position:absolute;left:0;top:0;width:35% height:100%}.layout .content .right{position:absolute;right:0;top:0;width:65%;height:100%}</style>
12 |     <link rel="stylesheet" href="assets/css/b.css?v=0.9&_rvc=8a71afe1" />
13 | </head>
14 | <body>
15 | 
16 |     <div class="app product-app details" id="app">
17 | 
18 |         <div class="content">
19 |             <p>
20 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
21 |             </p>
22 |         </div>
23 | 
24 |     </div>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/example/dist/inlineJs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>替换并压缩script标签链接</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 | 
12 | </head>
13 | <body>
14 | 
15 |     <div class="app product-app details" id="app">
16 | 
17 |         <div class="content">
18 |             <p id="content">
19 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
20 |             </p>
21 |         </div>
22 | 
23 |     </div>
24 | 
25 |     <script charset="utf-8" type="text/javascript" defer>;(function(){'use strict';var SYST=function(){this.name='Rodey';};window.SYST=new SYST();}).call(this);</script>
26 |     <script charset="utf-8" type="text/javascript" defer>window.onload=function(){console.log(SYST);};</script>
27 |     <script src="assets/js/c.js?_rvc=60f2ab86"></script>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/example/dist/inlineScript.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>压缩内联JavaScript</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 | 
12 | </head>
13 | <body>
14 | 
15 |     <div class="app product-app details" id="app">
16 | 
17 |         <div class="content">
18 |             <p id="content">
19 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
20 |             </p>
21 |         </div>
22 | 
23 |     </div>
24 | 
25 |     <script charset="utf-8" type="text/javascript" defer>
26 | 	;(function(){
27 | 
28 |     'use strict';
29 | 
30 |     var SYST = function(){
31 |         this.name = 'Rodey';
32 |     };
33 | 
34 |     window.SYST = new SYST();
35 | 
36 | }).call(this);
37 | 
38 | 	</script>
39 |     <script src="assets/js/c.js?t=453454545&_rvc=60f2ab86" defer></script>
40 |     <script>
41 |         window.onload = function(){
42 |             console.log('...ingore...');
43 |         };
44 |     </script>
45 |     <script>
46 |         var a = 0,
47 |             b = 1;
48 |         var arr = [];
49 |         arr.push(a);
50 |         arr.push(b);
51 |     </script>
52 | 
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/example/dist/inlineStyle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>压缩html中style css样式</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <style charset="utf-8" type="text/css">.layout{background-color:white;font-family:"Microsoft YaHei";font-size:1.2em;color:#000}.layout .content{width:100%;height:100%;padding:0;position:relative}.layout .content .left{position:absolute;left:0;top:0;width:35% height:100%}.layout .content .right{position:absolute;right:0;top:0;width:65%;height:100%}</style>
12 |     <link rel="stylesheet" href="assets/css/b.css?_rvc=8a71afe1"/>
13 |     <style>*{padding:0;margin:0}html,body{width:100%;height:100%}body{font-size:1.2em;-webkit-user-select:none;-webkit-appearance:none}</style>
14 |     <style>#content{padding:20px;border:1px solid rgba(0,0,0,.3);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}</style>
15 | </head>
16 | <body>
17 | 
18 |     <div class="app product-app details" id="app">
19 | 
20 |         <div class="content">
21 |             <p id="content">
22 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
23 |             </p>
24 |         </div>
25 | 
26 |     </div>
27 | 
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/example/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Rodey on 2015/11/5.
 3 |  */
 4 | 
 5 | var gulp        = require('gulp'),
 6 |     htmlInline  = require('../index');
 7 | 
 8 | var basePath = process.cwd();
 9 | console.log(basePath);
10 | 
11 | gulp.task('build.html.css', function(){
12 | 
13 |     gulp.src('inlineCss.html')
14 |         .pipe(htmlInline({
15 |             //basePath: basePath,
16 |         }))
17 |         .pipe(gulp.dest('dist'));
18 | 
19 | });
20 | 
21 | gulp.task('build.html.style', function(){
22 | 
23 |     gulp.src('inlineStyle.html')
24 |         .pipe(htmlInline({
25 |             basePath: basePath
26 |         }))
27 |         .pipe(gulp.dest('dist'));
28 | 
29 | });
30 | 
31 | gulp.task('build.html.js', function(){
32 | 
33 |     gulp.src('inlineJs.html')
34 |         .pipe(htmlInline({
35 |             minifyJs: true
36 |         }))
37 |         .pipe(gulp.dest('dist'));
38 | 
39 | });
40 | 
41 | gulp.task('build.html.script', function(){
42 | 
43 |     gulp.src('inlineScript.html')
44 |         .pipe(htmlInline())
45 |         .pipe(gulp.dest('dist'));
46 | 
47 | });
48 | 
49 | gulp.task('build.html', function(){
50 |     gulp.src('inline.html')
51 |         .pipe(htmlInline({
52 |             basePath: basePath,
53 |             minifyJs: true
54 |         }))
55 |         .pipe(gulp.dest('dist'));
56 | });
57 | 
58 | gulp.task('default', ['build.html', 'build.html.css', 'build.html.style', 'build.html.js', 'build.html.script']);


--------------------------------------------------------------------------------
/example/inline.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title></title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <link rel="stylesheet" href="assets/css/a.css?_toinline"/>
12 |     <link rel="stylesheet" href="assets/css/b.css?_toinline"/>
13 |     <style>
14 |         *{
15 |             padding: 0;
16 |             margin: 0;
17 |         }
18 |         html, body{
19 |             width: 100%;
20 |             height: 100%;
21 |         }
22 |         body{
23 |             font-size: 1.2em;
24 |             -webkit-user-select: none;
25 |             -webkit-appearance: none;
26 |         }
27 |     </style>
28 |     <style>
29 |         #content{
30 |             padding: 20px;
31 |             border: 1px solid rgba(0,0,0,.3);
32 |             -webkit-border-radius: 4px;
33 |             -moz-border-radius: 4px;
34 |             border-radius: 4px;
35 |         }
36 |     </style>
37 | </head>
38 | <body>
39 | 
40 |     <div class="app product-app details" id="app">
41 | 
42 |         <div class="content">
43 |             <p id="content">
44 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
45 |             </p>
46 |         </div>
47 | 
48 |     </div>
49 | 
50 |     <script src="assets/js/a.js?_toinline"></script>
51 |     <script src="assets/js/b.js?_toinline"></script>
52 |     <script src="assets/js/c.js?_tohash"></script>
53 |     <script>
54 |         var a = 0,
55 |             b = 1;
56 |         var arr = [];
57 |         arr.push(a);
58 |         arr.push(b);
59 |     </script>
60 | 
61 | 
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/example/inlineCss.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>替换并压缩link链接</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <link rel="stylesheet" href="assets/css/a.css?_toInline"/>
12 |     <link rel="stylesheet" href="assets/css/b.css?v=0.9&_toHash" />
13 | </head>
14 | <body>
15 | 
16 |     <div class="app product-app details" id="app">
17 | 
18 |         <div class="content">
19 |             <p>
20 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
21 |             </p>
22 |         </div>
23 | 
24 |     </div>
25 | 
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/example/inlineJs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>替换并压缩script标签链接</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 | 
12 | </head>
13 | <body>
14 | 
15 |     <div class="app product-app details" id="app">
16 | 
17 |         <div class="content">
18 |             <p id="content">
19 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
20 |             </p>
21 |         </div>
22 | 
23 |     </div>
24 | 
25 |     <script src="assets/js/a.js?_toInline"></script>
26 |     <script src="assets/js/b.js?_toInline&t=565665"></script>
27 |     <script src="assets/js/c.js?_toHash"></script>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/example/inlineScript.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>压缩内联JavaScript</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 | 
12 | </head>
13 | <body>
14 | 
15 |     <div class="app product-app details" id="app">
16 | 
17 |         <div class="content">
18 |             <p id="content">
19 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
20 |             </p>
21 |         </div>
22 | 
23 |     </div>
24 | 
25 |     <script src="assets/js/a.js?_toInline"></script>
26 |     <script src="assets/js/c.js?t=453454545&_toHash" defer></script>
27 |     <script>
28 |         window.onload = function(){
29 |             console.log('...ingore...');
30 |         };
31 |     </script>
32 |     <script>
33 |         var a = 0,
34 |             b = 1;
35 |         var arr = [];
36 |         arr.push(a);
37 |         arr.push(b);
38 |     </script>
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/example/inlineStyle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <title>压缩html中style css样式</title>
 5 |     <meta charset="UTF-8"/>
 6 |     <meta content="descriptions" charset="">
 7 |     <meta name="apple-mobile-web-app-capable" content="yes">
 8 |     <meta name="apple-mobile-web-status-bar-style" content="black-translucent">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10 |     <meta name="format-detection" content="telephone=no" />
11 |     <link rel="stylesheet" href="assets/css/a.css?_toInline"/>
12 |     <link rel="stylesheet" href="assets/css/b.css?_toHash"/>
13 |     <style>
14 |         *{
15 |             padding: 0;
16 |             margin: 0;
17 |         }
18 |         html, body{
19 |             width: 100%;
20 |             height: 100%;
21 |         }
22 |         body{
23 |             font-size: 1.2em;
24 |             -webkit-user-select: none;
25 |             -webkit-appearance: none;
26 |         }
27 |     </style>
28 |     <style>
29 |         #content{
30 |             padding: 20px;
31 |             border: 1px solid rgba(0,0,0,.3);
32 |             -webkit-border-radius: 4px;
33 |             -moz-border-radius: 4px;
34 |             border-radius: 4px;
35 |         }
36 |     </style>
37 | </head>
38 | <body>
39 | 
40 |     <div class="app product-app details" id="app">
41 | 
42 |         <div class="content">
43 |             <p id="content">
44 |                 压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）
45 |             </p>
46 |         </div>
47 | 
48 |     </div>
49 | 
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/example/test.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Rodey on 2015/11/5.
 3 |  */
 4 | 
 5 | var fs          = require('fs'),
 6 |     path        = require('path'),
 7 |     uglifycss   = require('uglifycss'),
 8 |     jsmin       = require('jsmin2');
 9 | 
10 | var linkRegx    = new RegExp('<link\\s+[\\s\\S]*?>[\\s\\S]*?<*\\/*>*', 'gi'),
11 |     hrefRegx    = new RegExp('\\s*(href)="+([\\s\\S]*?)"'),
12 |     styleRegx   = new RegExp('<style\\s*[\\s\\S]*?>[\\s\\S]*?<\\/style>', 'gi'),
13 |     scriptRegx  = new RegExp('<script\\s*[\\s\\S]*?>[\\s\\S]*?<\\/script>', 'gi'),
14 |     srcRegx     = new RegExp('\\s*(src)="+([\\s\\S]*?)"');
15 | 
16 | var getFileContent = function(file){
17 |     if(!fs.existsSync(file)) throw new Error('File not find: ' + file);
18 |     var fileContent = fs.readFileSync(file, { encoding: 'utf8' });
19 |     return fileContent;
20 | };
21 | 
22 | var src = 'assets/js/b.js',
23 |     html = 'inline.html';
24 | 
25 | var extname = path.extname(path.parse(src).name);
26 | 
27 | //console.log(extname.match(/(.js|.css)/gi)[0]);
28 | //console.log(getFileContent(src));
29 | //console.log(jsmin(getFileContent(src)).code);
30 | 
31 | var content = getFileContent(html);
32 | content = content.replace(styleRegx, function($1){
33 |     var ms = $1.match(/<[\s\S]*?<*\/*[\s\S]*?>/gi);
34 |     console.log(ms);
35 |     if(ms && ms[0].indexOf('ignore') !== -1)
36 |         return $1;
37 |     var mini = uglifycss.processString($1);
38 |     return mini;
39 | }).replace(linkRegx, function($1){
40 |     var ms = $1.match(/<(link|style)*?<*\/*[\s\S]*?>/gi);
41 |     //console.log(ms);
42 | });
43 | //console.log(content);
44 | 
45 | /*var content = getFileContent(html);
46 |  content = content.replace(scriptRegx, function($1){
47 | 
48 |  var ms = $1.match(/<script\s*[\s\S]*?>/gi);
49 |  if(ms && ms[0].indexOf('ignore') !== -1)
50 |  return $1;
51 |  var mini = jsmin($1).code;
52 |  console.log(mini);
53 |  return mini;
54 |  });
55 | 
56 |  console.log(content);*/
57 | 
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Rodey on 2015/11/5.
  3 |  */
  4 | 
  5 | var fs          = require('fs'),
  6 |     path        = require('path'),
  7 |     through2    = require('through2'),
  8 |     uglifycss   = require('uglifycss'),
  9 |     jsmin       = require('jsmin2'),
 10 |     crypto      = require('crypto'),
 11 |     url         = require('url'),
 12 |     PluginError = require('gulp-util').PluginError;
 13 | 
 14 | var PLUGIN_NAME = 'gulp-html-inline';
 15 | 
 16 | var linkRegx    = new RegExp('<link\\s+[\\s\\S]*?>[\\s\\S]*?<*\\/*>*', 'gi'),
 17 |     hrefRegx    = new RegExp('\\s*(href)="+([\\s\\S]*?)"'),
 18 |     styleRegx   = new RegExp('<style\\s*[\\s\\S]*?>[\\s\\S]*?<\\/style>', 'gi'),
 19 |     jsRegx      = new RegExp('<script\\s+[\\s\\S]*?>[\\s\\S]*?<\\/script>', 'gi'),
 20 |     scriptRegx  = new RegExp('<script\\s*(^|src)*?>[\\s\\S]*?<\\/script>', 'gi'),
 21 |     srcRegx     = new RegExp('\\s*(src)="+([\\s\\S]*?)"');
 22 | 
 23 | var joint = function(tag, content, attrstr){
 24 |     return '<'+ tag + attrstr +'>' + content + '</'+ tag +'>';
 25 | };
 26 | 
 27 | var isLocal = function(href){
 28 |     return href && href.slice(0, 2) !== '//' && !url.parse(href).hostname;
 29 | };
 30 | 
 31 | //压缩内联css代码 | js脚本
 32 | var miniInline = function(content, type, options){
 33 |     var isMinifyJs  = options.minifyJs,
 34 |         code        = content;
 35 | 
 36 |     if('css' === type){
 37 |         code = uglifycss.processString(content, options);
 38 |     }
 39 |     else if('js' === type){
 40 |         if(!isMinifyJs) return content;
 41 |         code = jsmin(content, options).code.replace(/(\n|\t)*/gi, '');
 42 |     }
 43 |     return code;
 44 | };
 45 | 
 46 | //replace callback src | href
 47 | var replaceCallback = function(sourceRegx, match, parentFile, type, options){
 48 | 
 49 |     var ms = sourceRegx.exec(match),
 50 |         code = '',
 51 |         content = '',
 52 |         attrString = ' charset="utf-8" ',
 53 |         isMinifyJs  = options.minifyJs,
 54 |         basePath    = options.basePath,
 55 |         tohashRegx   = options.tohashRegx;
 56 | 
 57 |     if(!ms || !ms[2] || '' === ms[2]){
 58 |         return miniInline(match, type, options);
 59 |     }
 60 |     var href = ms[2] || '';
 61 | 
 62 |     if(!isLocal(href))      return href;
 63 |     if(/^\?/i.test(href))   return '';
 64 | 
 65 |     //在url地址上加上 _toInline 字段就可以直接嵌入网页
 66 |     //如果href上面不存在 _toInline 字符或者options中指定的toInlne字符
 67 |     if(href.search(options.toinlineRegx) === -1){
 68 | 
 69 |         var hash = '';
 70 |         //如果存在 _toHash 字符
 71 |         if(href.search(tohashRegx) !== -1){
 72 |             content = _getContents();
 73 |             if(content != null){
 74 |                 hash = getFileHash(content, 8);
 75 |             }else{
 76 |                 hash = getFileHash(Date.now() + '_' + Math.random() * 100000, 8);
 77 |             }
 78 |             return match.replace(tohashRegx, function(mh, $1){
 79 |                 return $1 + options.queryKey +'=' + hash;
 80 |             });
 81 |         }
 82 |         return match;
 83 |     }
 84 | 
 85 |     content = _getContents();
 86 |     if(content == null) return match;
 87 | 
 88 |     if('css' === type){
 89 |         code = uglifycss.processString(content, options);
 90 |         code = joint('style', code, attrString + 'type="text/css"');
 91 |     }
 92 |     else if('js' === type){
 93 |         if(!isMinifyJs)
 94 |             return joint('script', '\n\t' + content + '\n\t', attrString + 'type="text/javascript" defer');
 95 |         code = jsmin(content, options).code.replace(/(\n|\t)*/gi, '');
 96 |         code = joint('script', code, attrString + 'type="text/javascript" defer');
 97 |     }
 98 | 
 99 |     return code;
100 | 
101 |     function _getContents(){
102 |         var tempFilePath;
103 |         if(basePath && '' !== basePath){
104 |             tempFilePath = path.resolve(basePath, href);
105 |         }else{
106 |             tempFilePath = path.resolve(path.dirname(parentFile), href);
107 |         }
108 |         tempFilePath = tempFilePath.replace(/\?[^\?]*/gi, '');
109 |         return getFileContent(tempFilePath);
110 |     }
111 | };
112 | 
113 | //根据标签类型获取内容并压缩
114 | var execture = function(file, options){
115 | 
116 |     var parentFile = path.normalize(file.path);
117 |     var fileContents = file.contents.toString('utf8');
118 |     if(typeof fileContents === 'undefined'){
119 |         fileContents = getFileContent(file.path);
120 |     }
121 | 
122 |     //获取单个标签的替换内容（已压缩）
123 |     var content = fileContents
124 |         .replace(styleRegx, function($1){
125 | 
126 |             //like:
127 |             // <style ignore>
128 |             //  #app{
129 |             //      width: 80%;
130 |             //      padding: 10px;
131 |             //  }
132 |             // </style>
133 |             //console.log($1);
134 |             return miniInline($1, 'css', options);
135 | 
136 |         }).replace(scriptRegx, function($1){
137 |             //like:
138 |             // <script ignore>
139 |             //      var a = 0,
140 |             //          b = 0;
141 |             //      var arr = [];
142 |             //      arr.push(a);
143 |             //      arr.push(b);
144 |             // </script>
145 |             //console.log($1);
146 |             return miniInline($1, 'js', options);
147 |         }).replace(linkRegx, function($1){
148 | 
149 |             //like: <link rel="stylesheet" href="assets/css/a.css" />
150 |             return replaceCallback(hrefRegx, $1, parentFile, 'css', options);
151 | 
152 |         }).replace(jsRegx, function($1){
153 | 
154 |             //like: <script src="assets/js/a.js"></script>
155 |             //console.log($1);
156 |             return replaceCallback(srcRegx, $1, parentFile, 'js', options);
157 | 
158 |         });
159 | 
160 |     return content;
161 | };
162 | 
163 | //获取文件内容
164 | var getFileContent = function(file){
165 |     if(!fs.existsSync(file)) return null;
166 |     return fs.readFileSync(file, { encoding: 'utf8' });
167 |     //file.contents = new Buffer(uglifycss.processString(fileContent, options));
168 | };
169 | 
170 | var resetOptions = function(options){
171 |     options['basePath']     = options['basePath'] || '';
172 |     options['queryKey']     = options['queryKey'] || '_rvc';
173 |     options['toInline']     = options['toInline'] || '_toInline';
174 |     options['toHash']       = options['toHash'] || '_toHash';
175 |     options['hashSize']     = options['hashSize'] || 8;
176 |     options['toinlineRegx'] = new RegExp('(\\?|\\&)+' + options['toInline'], 'gi');
177 |     options['tohashRegx']   = new RegExp('(\\?|\\&)+' + options['toHash'], 'gi');
178 |     return options;
179 | };
180 | 
181 | //获取压缩后的内容
182 | var getContent = function(file, options){
183 |     return execture(file, resetOptions(options));
184 | };
185 | 
186 | //获取文件hash值
187 | var getFileHash = function(fileContent, size){
188 |     var fileHash = crypto.createHash('md5').update(fileContent).digest('hex').slice(0, size || 10);
189 |     return fileHash;
190 | };
191 | 
192 | //将压缩后的内容替换到html中
193 | var inline = function(options){
194 |     options = options || {};
195 |     return through2.obj(function(file, enc, next){
196 | 
197 |         if (file.isStream()) {
198 |             this.emit('error', new PluginError(PLUGIN_NAME, 'Stream content is not supported'));
199 |             return next(null, file);
200 |         }
201 |         if (file.isBuffer()) {
202 |             try {
203 |                 var content = getContent(file, options);
204 |                 //console.log(content);
205 |                 file.contents = new Buffer(content);
206 |             }
207 |             catch (err) {
208 |                 this.emit('error', new PluginError(PLUGIN_NAME, ''));
209 |             }
210 |         }
211 |         this.push(file);
212 |         return next();
213 | 
214 | 
215 |     });
216 | 
217 | };
218 | 
219 | module.exports = inline;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-html-inline",
 3 |   "version": "3.0.0",
 4 |   "description": "压缩html中的css和js（可将link和script中的href或者src引入的文件直接压缩替换到html中）",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "gulp-html-inline"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/RodeyManager/gulp-html-inline.git"
12 |   },
13 |   "keywords": [
14 |     "gulp-html-inline",
15 |     "html",
16 |     "css",
17 |     "script"
18 |   ],
19 |   "author": {
20 |     "name": "Rodey"
21 |   },
22 |   "license": "ISC",
23 |   "bugs": {
24 |     "url": "https://github.com/RodeyManager/gulp-html-inline/issues"
25 |   },
26 |   "homepage": "https://github.com/RodeyManager/gulp-html-inline#readme",
27 |   "devDependencies": {
28 |     "gulp": "^3.9.0"
29 |   },
30 |   "dependencies": {
31 |     "gulp-util": "^3.0.7",
32 |     "jsmin2": "^1.1.7",
33 |     "through2": "^2.0.0",
34 |     "uglifycss": "0.0.18"
35 |   },
36 |   "gitHead": "51b90a75d4561a42231803ab24c49a63e82aaf0d",
37 |   "_id": "gulp-html-inline@0.0.8",
38 |   "_shasum": "5125a3f527b2e9463bc063777c5f0af38fa62750",
39 |   "_from": "gulp-html-inline@0.0.8",
40 |   "_npmVersion": "2.11.3",
41 |   "_nodeVersion": "0.12.7",
42 |   "_npmUser": {
43 |     "name": "rodey",
44 |     "email": "rodeyluo@gmail.com"
45 |   },
46 |   "dist": {
47 |     "shasum": "5125a3f527b2e9463bc063777c5f0af38fa62750",
48 |     "tarball": "https://registry.npmjs.org/gulp-html-inline/-/gulp-html-inline-0.0.8.tgz"
49 |   },
50 |   "maintainers": [
51 |     {
52 |       "name": "rodey",
53 |       "email": "rodeyluo@gmail.com"
54 |     }
55 |   ],
56 |   "directories": {},
57 |   "_resolved": "https://registry.npmjs.org/gulp-html-inline/-/gulp-html-inline-0.0.8.tgz",
58 |   "readme": "ERROR: No README data found!"
59 | }
60 | 


--------------------------------------------------------------------------------