Skip to content

Commit 53d1eef

Browse files
spacerockzerospacerockzero
authored
Merge pull request #43 from PracticeJavaScript/htmlmin
fixed linter error
2 parents 05af5f8 + 13f55f6 commit 53d1eef

File tree

12 files changed

+4326
-139
lines changed

12 files changed

+4326
-139
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ firebase serve
3030

3131
- That will build it all and watch the css, img, and js assets.
3232
- Then you can load up `http://localhost:5000` or `public/index.html` in a browser. narf!
33-
`/src/index.js` is the main file you'll want to edit for functionality.
33+
`/src/index.js`, `/src/css/style.scss`, and `/src/html/index.html` are the main files you'll want to edit for functionality.
3434
- If you have the [LiveReload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) installed, it should do live css updates in your browser while gulp watch is running
3535
- CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
3636
- NOTE: If you change the UI, please update the screenshot at top of this README

‎gulpfile.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const cssnano = require('cssnano');
1515
const svgo = require('gulp-svgo');
1616
const sass = require('gulp-sass');
1717
const livereload = require('gulp-livereload');
18+
const htmlmin = require('gulp-htmlmin');
1819

1920
// CONFIG
2021
// ============================================================
@@ -31,6 +32,12 @@ const opts = {
3132

3233
const uglifyConf = {};
3334

35+
const htmlminConfig = {
36+
collapseWhitespace: true,
37+
minifyCSS: true,
38+
minifyJS: true
39+
};
40+
3441
// TASKS
3542
// ============================================================
3643

@@ -123,6 +130,21 @@ imgWatcher.on('change', event => {
123130
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
124131
});
125132

133+
// HTML
134+
// ============================================================
135+
136+
gulp.task('html', () => {
137+
return gulp.src('./src/html/*.html')
138+
.pipe(htmlmin(htmlminConfig))
139+
.pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
140+
});
141+
142+
const htmlWatcher = gulp.watch('src/html/*.html', ['html']);
143+
144+
htmlWatcher.on('change', event => {
145+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
146+
});
147+
126148
// BUILD
127149
// ============================================================
128150

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"babelify": "^7.3.0",
4949
"cssnano": "^3.10.0",
5050
"gulp": "^3.9.1",
51+
"gulp-htmlmin": "^3.0.0",
5152
"gulp-postcss": "^6.4.0",
5253
"gulp-sourcemaps": "^2.5.1",
5354
"gulp-uglify": "^2.1.2",
@@ -66,6 +67,7 @@
6667
"babel-preset-latest": "^6.24.1",
6768
"browserify": "^14.1.0",
6869
"chai": "^3.5.0",
70+
"gulp-htmlmin": "^3.0.0",
6971
"gulp-livereload": "^3.8.1",
7072
"gulp-sass": "^3.1.0",
7173
"gulp-svgo": "^1.0.3",

‎public/404.html

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Page Not Found</title>
7-
8-
<style media="screen">
9-
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10-
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11-
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12-
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13-
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14-
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15-
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16-
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17-
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18-
@media (max-width: 600px) {
19-
body, #message { margin-top: 0; background: white; box-shadow: none; }
20-
body { border-top: 16px solid #ffa100; }
21-
}
22-
</style>
23-
</head>
24-
<body>
25-
<div id="message">
26-
<h2>404</h2>
27-
<h1>Page Not Found</h1>
28-
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29-
<h3>Why am I seeing this?</h3>
30-
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31-
</div>
32-
</body>
33-
</html>
1+
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Page Not Found</title><style media="screen">body{background:#eceff1;color:rgba(0,0,0,.87);font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0}#message{background:#fff;max-width:360px;margin:100px auto 16px;padding:32px 24px 16px;border-radius:3px}#message h3{color:#888;font-weight:400;font-size:16px;margin:16px 0 12px}#message h2{color:#ffa100;font-weight:700;font-size:16px;margin:0 0 8px}#message h1{font-size:22px;font-weight:300;color:rgba(0,0,0,.6);margin:0 0 16px}#message p{line-height:140%;margin:16px 0 24px;font-size:14px}#message a{display:block;text-align:center;background:#039be5;text-transform:uppercase;text-decoration:none;color:#fff;padding:16px;border-radius:4px}#message,#message a{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}#load{color:rgba(0,0,0,.4);text-align:center;font-size:13px}@media (max-width:600px){#message,body{margin-top:0;background:#fff;box-shadow:none}body{border-top:16px solid #ffa100}}</style></head><body><div id="message"><h2>404</h2><h1>Page Not Found</h1><p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p><h3>Why am I seeing this?</h3><p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p></div></body></html>

‎public/dist/css/min.min.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/dist/css/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/js/bundle.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)