jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 19:09:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use webpack plugin to generate HTML (#1521)

Browse Source 
* Use webpack plugin to generate HTML

* Generate index.html

* Remove unused packages
This commit is contained in:
Paulus Schoutsen
2018-07-26 09:30:03 +02:00
committed by GitHub
parent e458cf1388
commit 6cbca6d88a
19 changed files with 235 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
gulp/common/gulp-uglify.js
View File

@@ -1,10 +0,0 @@
/**
* UglifyJS gulp plugin that takes in a boolean to use ES or JS minification.
*/
const composer = require('gulp-uglify/composer');
const uglifyjs = require('uglify-js');
const uglifyes = require('uglify-es');
module.exports = function gulpUglify(es6, options) {
return composer(es6 ? uglifyes : uglifyjs, console)(options);
};

8
gulp/common/md5.js
View File

@@ -1,8 +0,0 @@
const fs = require('fs');
const crypto = require('crypto');
module.exports = function md5(filename) {
return crypto.createHash('md5')
.update(fs.readFileSync(filename)).digest('hex');
};

32
gulp/common/transform.js
View File

@@ -1,32 +0,0 @@
const gulpif = require('gulp-if');
const babel = require('gulp-babel');
const { gulp: cssSlam } = require('css-slam');
const htmlMinifier = require('gulp-html-minifier');
const { HtmlSplitter } = require('polymer-build');
const pump = require('pump');
const uglify = require('./gulp-uglify.js');
module.exports.minifyStream = function (stream, es6) {
const sourcesHtmlSplitter = new HtmlSplitter();
return pump([
stream,
sourcesHtmlSplitter.split(),
gulpif(!es6, gulpif(/[^app]\.js$/, babel({
sourceType: 'script',
presets: [
['es2015', { modules: false }]
]
}))),
gulpif(/\.js$/, uglify(es6, { sourceMap: false })),
gulpif(/\.css$/, cssSlam()),
gulpif(/\.html$/, cssSlam()),
gulpif(/\.html$/, htmlMinifier({
collapseWhitespace: true,
removeComments: true
})),
sourcesHtmlSplitter.rejoin(),
], (error) => {
if (error) console.log(error);
});
};

51
gulp/tasks/gen-authorize-html.js
View File

@@ -1,51 +0,0 @@
const gulp = require('gulp');
const path = require('path');
const replace = require('gulp-batch-replace');
const rename = require('gulp-rename');
const md5 = require('../common/md5');
const url = require('url');
const config = require('../config');
const minifyStream = require('../common/transform').minifyStream;
const buildReplaces = {
'/frontend_latest/authorize.js': 'authorize.js',
};
async function buildAuth(es6) {
const targetPath = es6 ? config.output : config.output_es5;
const targetUrl = es6 ? '/frontend_latest/' : '/frontend_es5/';
const frontendPath = es6 ? 'frontend_latest' : 'frontend_es5';
const toReplace = [
['/home-assistant-polymer/hass_frontend/authorize.js', `/${frontendPath}/authorize.js`],
];
if (!es6) {
const compatibilityPath = `/frontend_es5/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`;
const es5Extra = `
<script src='${compatibilityPath}'></script>
<script src='/static/custom-elements-es5-adapter.js'></script>
`;
toReplace.push([
'<!--EXTRA_SCRIPTS-->', es5Extra
]);
}
for (const [replaceSearch, filename] of Object.entries(buildReplaces)) {
const parsed = path.parse(filename);
const hash = md5(path.resolve(targetPath, filename));
toReplace.push([
replaceSearch,
url.resolve(targetUrl, `${parsed.name}-${hash}${parsed.ext}`)]);
}
const stream = gulp.src(path.resolve(config.polymer_dir, 'src/authorize.html'))
.pipe(replace(toReplace));
return minifyStream(stream, /* es6= */ es6)
.pipe(rename('authorize.html'))
.pipe(gulp.dest(es6 ? config.output : config.output_es5));
}
gulp.task('gen-authorize-html-es5', () => buildAuth(/* es6= */ false));
gulp.task('gen-authorize-html', () => buildAuth(/* es6= */ true));

1
gulp/tasks/gen-icons.js
View File

@@ -98,7 +98,6 @@ function genHassIcons() {
gulp.task('gen-icons-mdi', () => genMDIIcons());
gulp.task('gen-icons-hass', () => genHassIcons());
gulp.task('gen-icons-hassio', () => genHassIcons());
gulp.task('gen-icons', ['gen-icons-hass', 'gen-icons-mdi'], () => {});
module.exports = {

54
gulp/tasks/gen-index-html.js
View File

@@ -1,54 +0,0 @@
const gulp = require('gulp');
const replace = require('gulp-batch-replace');
const path = require('path');
const url = require('url');
const config = require('../config');
const md5 = require('../common/md5');
const { minifyStream } = require('../common/transform');
const buildReplaces = {
'/frontend_latest/core.js': 'core.js',
'/frontend_latest/app.js': 'app.js',
};
function generateIndex(es6) {
const targetPath = es6 ? config.output : config.output_es5;
const targetUrl = es6 ? '/frontend_latest/' : '/frontend_es5/';
const toReplace = [
// Needs to look like a color during CSS minifiaction
['{{ theme_color }}', '#THEME'],
['/frontend_latest/hass-icons.js',
`/frontend_latest/hass-icons-${md5(path.resolve(config.output, 'hass-icons.js'))}.js`],
];
if (!es6) {
const compatibilityPath = `/frontend_es5/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`;
const es5Extra = `
<script src='${compatibilityPath}'></script>
<script src='/static/custom-elements-es5-adapter.js'></script>
`;
toReplace.push([
'<!--EXTRA_SCRIPTS-->', es5Extra
]);
}
for (const [replaceSearch, filename] of Object.entries(buildReplaces)) {
const parsed = path.parse(filename);
const hash = md5(path.resolve(targetPath, filename));
toReplace.push([
replaceSearch,
url.resolve(targetUrl, `${parsed.name}-${hash}${parsed.ext}`)]);
}
const stream = gulp.src(path.resolve(config.polymer_dir, 'index.html'))
.pipe(replace(toReplace));
return minifyStream(stream, es6)
.pipe(replace([['#THEME', '{{ theme_color }}']]))
.pipe(gulp.dest(targetPath));
}
gulp.task('gen-index-html-es5', generateIndex.bind(null, /* es6= */ false));
gulp.task('gen-index-html', generateIndex.bind(null, /* es6= */ true));

51
gulp/tasks/gen-onboarding-html.js
View File

@@ -1,51 +0,0 @@
const gulp = require('gulp');
const path = require('path');
const replace = require('gulp-batch-replace');
const rename = require('gulp-rename');
const md5 = require('../common/md5');
const url = require('url');
const config = require('../config');
const minifyStream = require('../common/transform').minifyStream;
const buildReplaces = {
'/frontend_latest/onboarding.js': 'onboarding.js',
};
async function buildOnboarding(es6) {
const targetPath = es6 ? config.output : config.output_es5;
const targetUrl = es6 ? '/frontend_latest/' : '/frontend_es5/';
const frontendPath = es6 ? 'frontend_latest' : 'frontend_es5';
const toReplace = [
['/home-assistant-polymer/hass_frontend/onboarding.js', `/${frontendPath}/onboarding.js`],
];
if (es6) {
toReplace.push(['<!--EXTRA_SCRIPTS-->', '']);
} else {
const compatibilityPath = `/frontend_es5/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`;
const es5Extra = `
<script src='${compatibilityPath}'></script>
<script src='/static/custom-elements-es5-adapter.js'></script>
`;
toReplace.push(['<!--EXTRA_SCRIPTS-->', es5Extra]);
}
for (const [replaceSearch, filename] of Object.entries(buildReplaces)) {
const parsed = path.parse(filename);
const hash = md5(path.resolve(targetPath, filename));
toReplace.push([
replaceSearch,
url.resolve(targetUrl, `${parsed.name}-${hash}${parsed.ext}`)]);
}
const stream = gulp.src(path.resolve(config.polymer_dir, 'src/onboarding.html'))
.pipe(replace(toReplace));
return minifyStream(stream, /* es6= */ es6)
.pipe(rename('onboarding.html'))
.pipe(gulp.dest(es6 ? config.output : config.output_es5));
}
gulp.task('gen-onboarding-html-es5', () => buildOnboarding(/* es6= */ false));
gulp.task('gen-onboarding-html', () => buildOnboarding(/* es6= */ true));