Skip to content

added htmlmin #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 6, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ firebase serve

- That will build it all and watch the css, img, and js assets.
- Then you can load up `http://localhost:5000` or `public/index.html` in a browser. narf!
`/src/index.js` is the main file you'll want to edit for functionality.
`/src/index.js`, `/src/css/style.scss`, and `/src/html/index.html` are the main files you'll want to edit for functionality.
- 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
- CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
- NOTE: If you change the UI, please update the screenshot at top of this README
Expand Down
22 changes: 22 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const cssnano = require('cssnano');
const svgo = require('gulp-svgo');
const sass = require('gulp-sass');
const livereload = require('gulp-livereload');
const htmlmin = require('gulp-htmlmin');

// CONFIG
// ============================================================
Expand All @@ -31,6 +32,12 @@ const opts = {

const uglifyConf = {};

const htmlminConfig = {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
};

// TASKS
// ============================================================

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

// HTML
// ============================================================

gulp.task('html', () => {
return gulp.src('./src/html/*.html')
.pipe(htmlmin(htmlminConfig))
.pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
});

const htmlWatcher = gulp.watch('src/html/*.html', ['html']);

htmlWatcher.on('change', event => {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

// BUILD
// ============================================================

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"babelify": "^7.3.0",
"cssnano": "^3.10.0",
"gulp": "^3.9.1",
"gulp-htmlmin": "^3.0.0",
"gulp-postcss": "^6.4.0",
"gulp-sourcemaps": "^2.5.1",
"gulp-uglify": "^2.1.2",
Expand All @@ -66,6 +67,7 @@
"babel-preset-latest": "^6.24.1",
"browserify": "^14.1.0",
"chai": "^3.5.0",
"gulp-htmlmin": "^3.0.0",
"gulp-livereload": "^3.8.1",
"gulp-sass": "^3.1.0",
"gulp-svgo": "^1.0.3",
Expand Down
34 changes: 1 addition & 33 deletions public/404.html
Original file line number Diff line number Diff line change
@@ -1,33 +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,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,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: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; 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>
<!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>
1 change: 0 additions & 1 deletion public/dist/css/min.min.css

This file was deleted.

2 changes: 1 addition & 1 deletion public/dist/css/style.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions public/dist/js/bundle.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/dist/js/bundle.min.js.map

Large diffs are not rendered by default.

Loading