-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (148 loc) · 8.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Getting Cozy with Browserify</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,400|Montserrat:100,200,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="./app/css/app.css">
</head>
<body>
<nav class="navbar navbar-toggleable navbar-inverse app-nav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">BrowserifyTuttie</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
<span class="navbar-text">Test with Gulp + Browsersync</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-12 col-sm-3 col-lg-2 bg-faded sidebar nav-adjust">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Remote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./index-selfhost.html">Selfhost</a>
</li>
</ul>
</nav>
<main class="col-12 col-sm-9 col-lg-10 nav-adjust">
<section class="container imagemin">
<div>
<h1>Browserified</h1>
<hr>
<p class="lead">Testing with Browsersync, imagemin & Gulp. Note that this file is using remote vendor scripts as they are not concatenated into the bundled script</p>
<br/>
<h3>Consumed npm-modules in the browser</h3>
<p>Example: Using the <code>ramda</code> npm module in the client as bundled by browserify</p>
<small class="text-muted blockquote">Squares: <span id="response"></span></small>
</div>
<div>
<br/>
<h3>Image Optimisation with <code>gulp-imagemin</code></h3>
<div class="row">
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="app/images/ball.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Original</h4>
<p class="card-text">PNG: This Ball has not been minified</p>
<p class="card-text">
<small class="text-muted">Its about 204KB</small>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="build/img/ball.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Minified</h4>
<p class="card-text">This Ball has been minified</p>
<p class="card-text">
<small class="text-muted" id="response">175KB (saved 29.3 kB - 14%)</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="app/images/img.svg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Original</h4>
<p class="card-text">SVG: Untouched SVG with Text</p>
<p class="card-text">
<small class="text-muted" id="response">About 529 bytes</small>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="build/img/img.svg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Minified</h4>
<p class="card-text">Imagemin removes some xml markup</p>
<p class="card-text">
<small class="text-muted" id="response">370 bytes (saved 159 B - 30.1%)</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="app/images/placeholder.svg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Original</h4>
<p class="card-text">SVG: Untouched SVG with more Paths</p>
<p class="card-text">
<small class="text-muted" id="response">About 749 bytes</small>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="card">
<img class="card-img-top" src="build/img/placeholder.svg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Minified</h4>
<p class="card-text">Imagemin removes some xml markup</p>
<p class="card-text">
<small class="text-muted" id="response">298 bytes (saved 451 B - 60.2%)</small>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="build/js/bundle.js"></script>
</body>
</html>