diff --git a/client/build.js b/client/build.js index fbf378d..38e8769 100644 --- a/client/build.js +++ b/client/build.js @@ -55,42 +55,50 @@ function getConfig() { return config; } -function bundleHtml(config) { - const minify = require('html-minifier').minify; - const baseHtml = fs.readFileSync('./html/index.htm', 'utf-8'); - const minifyOptions = { +function minifyJs(path) { + return require('uglify-js').minify(path).code; +} + +function minifyCss(css) { + return require('csso').minify(css); +} + +function minifyHtml(html) { + return require('html-minifier').minify(html, { removeComments: true, collapseWhitespace: true, conservativeCollapse: true, - }; + }).trim(); +} + +function bundleHtml(config) { + const lodash = require('lodash'); + const babelify = require('babelify'); + const baseHtml = fs.readFileSync('./html/index.htm', 'utf-8'); + const finalHtml = baseHtml + .replace( + /()(.*)(<\/title>)/, + util.format('$1%s$3', config.name)); + fs.writeFileSync('./public/index.htm', minifyHtml(finalHtml)); + glob('./html/**/*.tpl', {}, (er, files) => { - let templates = {}; + let compiledTemplateJs = '\'use strict\'\n'; + compiledTemplateJs += 'let _ = require(\'lodash\');'; + compiledTemplateJs += 'let templates = {};'; for (const file of files) { const name = path.basename(file, '.tpl').replace(/_/g, '-'); - templates[name] = minify( - fs.readFileSync(file, 'utf-8'), minifyOptions); + const templateText = minifyHtml(fs.readFileSync(file, 'utf-8')); + const functionText = lodash.template( + templateText, {variable: 'ctx'}).source; + compiledTemplateJs += `templates['${name}'] = ${functionText};`; } - - const templatesHolder = util.format( - '<script type=\'text/javascript\'>' + - 'var templates = %s;' + - '</script>', - JSON.stringify(templates)); - - const finalHtml = baseHtml - .replace(/(<\/head>)/, templatesHolder + '$1') - .replace( - /(<title>)(.*)(<\/title>)/, - util.format('$1%s$3', config.name)); - - fs.writeFileSync( - './public/index.htm', minify(finalHtml, minifyOptions)); + compiledTemplateJs += 'module.exports = templates;'; + fs.writeFileSync('./js/.templates.autogen.js', compiledTemplateJs); console.info('Bundled HTML'); }); } function bundleCss() { - const minify = require('csso').minify; const stylus = require('stylus'); glob('./css/**/*.styl', {}, (er, files) => { let css = ''; @@ -98,24 +106,11 @@ function bundleCss() { css += stylus.render( fs.readFileSync(file, 'utf-8'), {filename: file}); } - fs.writeFileSync('./public/app.min.css', minify(css)); + fs.writeFileSync('./public/app.min.css', minifyCss(css)); console.info('Bundled CSS'); }); } -function writeJsBundle(b, path, message, compress) { - const uglifyjs = require('uglify-js'); - let outputFile = fs.createWriteStream(path); - b.bundle().pipe(outputFile); - outputFile.on('finish', function() { - if (compress) { - const result = uglifyjs.minify(path); - fs.writeFileSync(path, result.code); - } - console.info(message); - }); -} - function bundleJs(config) { const browserify = require('browserify'); const external = [ @@ -126,6 +121,18 @@ function bundleJs(config) { 'page', 'nprogress', ]; + + function writeJsBundle(b, path, message, compress) { + let outputFile = fs.createWriteStream(path); + b.bundle().pipe(outputFile); + outputFile.on('finish', function() { + if (compress) { + fs.writeFileSync(path, minifyJs(path)); + } + console.info(message); + }); + } + glob('./js/**/*.js', {}, (er, files) => { if (!process.argv.includes('--no-vendor-js')) { let b = browserify(); diff --git a/client/js/.gitignore b/client/js/.gitignore index 16e3bbe..13ed109 100644 --- a/client/js/.gitignore +++ b/client/js/.gitignore @@ -1 +1 @@ -.config.autogen.json +*.autogen.* diff --git a/client/js/templates.js b/client/js/templates.js new file mode 100644 index 0000000..f378cbc --- /dev/null +++ b/client/js/templates.js @@ -0,0 +1,3 @@ +'use strict'; + +module.exports = require('./.templates.autogen.js'); diff --git a/client/js/util/views.js b/client/js/util/views.js index 173c04f..2e27d14 100644 --- a/client/js/util/views.js +++ b/client/js/util/views.js @@ -1,7 +1,7 @@ 'use strict'; require('../util/polyfill.js'); -const lodash = require('lodash'); +const templates = require('../templates.js'); const tags = require('../tags.js'); const events = require('../events.js'); const domParser = new DOMParser(); @@ -237,8 +237,7 @@ function getTemplate(templatePath) { console.error('Missing template: ' + templatePath); return null; } - const templateText = templates[templatePath].trim(); - const templateFactory = lodash.template(templateText, {variable: 'ctx'}); + const templateFactory = templates[templatePath]; return ctx => { if (!ctx) { ctx = {};