Skip to content

Commit 8e6e2bc

Browse files
committed
refactored build.transform.js
1 parent 484682c commit 8e6e2bc

16 files changed

Lines changed: 51 additions & 110 deletions

src/apple-touch-icon.png

52 KB
Loading

src/icon.png

55.9 KB
Loading

src/scripts/client/util/browser.util.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
'use strict';
2-
31
/*global ga*/
42
/*eslint no-undef: "error"*/
53

src/scripts/components/Head.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
"use strict";
2-
31
import React from 'react';
42

53
import processRelPath from '../model/head';
64

75
const Head = ({title, description, styles, scripts, rel}) => {
8-
let { touchHref, styleLinks, scriptLinks } = processRelPath(rel, styles, scripts);
6+
const { touchHref, webMan, styleLinks, scriptLinks } = processRelPath(rel, styles, scripts);
97
return (
108
<head>
11-
<meta charSet="utf-8" />
12-
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
9+
<meta charSet="utf-8" />
1310
<title>{title}</title>
1411
<meta name="description" content={description} />
1512
<meta name="viewport" content="width=device-width, initial-scale=1" />
1613

14+
<link rel="manifest" href={webMan} />
1715
<link rel="apple-touch-icon" href={touchHref} />
1816

1917
{styleLinks.map( (s, i) => <link rel="stylesheet" href={s} key={i} /> )}
20-
{scriptLinks.map( (s, i) => <script src={s} key={i} /> )}
18+
{scriptLinks.map((s, i) => <script src={s} key={i} />)}
19+
<meta name="theme-color" content="#fafafa" />
2120
</head>
2221
);
2322
};

src/scripts/components/Header.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use strict";
2-
31
import React from 'react';
42

53
import Menu from './Menu';

src/scripts/index.js

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
"use strict";
2-
31
import React from 'react';
42

5-
let pkg = require("../../package.json");
6-
import Conf from '../../tool/base.config';
7-
83
import Head from './components/Head';
94
import Header from './components/Header';
105
import Main from './components/Main';
116
import Footer from './components/Footer';
127

8+
import indexModel from './model/index';
9+
1310
const Root = () => {
14-
let pageTitle = `Welcome to ${pkg.name} v${pkg.version}`;
1511
return (
1612
<html className="no-js" lang="en">
17-
<Head title={pageTitle} description={pkg.description} styles={Conf.styles} scripts={Conf.scripts}/>
13+
<Head {...indexModel} />
1814

19-
<body className='page-index container-fluid top-container'>
20-
<Header title={pageTitle} />
15+
<body className='container'>
16+
<Header title={indexModel.title} />
2117
<Main>
2218
<div className="row">
23-
<aside className="col-md-2 hidden-sm hidden-xs">
19+
<aside>
2420
<p>left side</p>
2521
</aside>
26-
<section className="col-md-8">
22+
<section>
2723
<p>Main content</p>
2824
</section>
29-
<aside className="col-md-2 hidden-sm hidden-xs">
25+
<aside>
3026
<p>right side</p>
3127
</aside>
3228
</div>

src/scripts/model/head.js

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
"use strict";
22

3-
export default function processRelPath(rel, styles, scripts) {
4-
let relPath = rel ? rel : "";
5-
let touchHref = relPath + "apple-touch-icon.png";
3+
export default function processRelPath(rel = "", styles, scripts) {
4+
const touchHref = rel + "apple-touch-icon.png";
5+
const webMan = rel + "site.webmanifest";
66

77
if (!rel) {
8-
return {touchHref, styleLinks: styles, scriptLinks: scripts};
8+
return {touchHref, webMan, styleLinks: styles, scriptLinks: scripts};
99
}
1010

11-
let styleLinks = styles.map( s => {
12-
return (s.indexOf('styles/') === 0) ? relPath + s : s;
13-
});
14-
let scriptLinks = scripts.map( s => {
15-
return (s.indexOf('scripts/') === 0) ? relPath + s : s;
16-
});
11+
const styleLinks = styles.map(s => `${rel}css/${s}` );
12+
const scriptLinks = scripts.map( s => `${rel}js/${s}`);
1713

18-
return {touchHref, styleLinks, scriptLinks};
14+
return {touchHref, webMan, styleLinks, scriptLinks};
1915
}

src/scripts/model/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use strict";
22

33
const HeaderModel = {
4-
homeLink: {name: "Home", href: "./", img: "images/logo.png"},
4+
homeLink: {name: "Home", href: "./", img: "img/logo.png"},
55
bannerLink: {name: "Banner Ad", href: "", img: "http://placehold.it/420x60"},
66
socials:[
77
{id: "icon-facebook", href: "http://facebook.com"},

src/scripts/model/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const pkg = require('../../../package.json');
2+
import Conf from '../../../tool/base.config';
3+
import glob from 'glob';
4+
5+
export default {
6+
title: `Welcome to ${pkg.name} v${pkg.version}`,
7+
description: pkg.description,
8+
scripts: glob.sync('**/*.js', { cwd: Conf.target.js_path }),
9+
styles: glob.sync('**/*.css', { cwd: Conf.target.css_path }),
10+
rel: './'
11+
}

tool/build.transform.js

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,65 +15,16 @@ function appendGATrackCode(content) {
1515
return content.slice(0, content.lastIndexOf(pageEnds)) + gaCode + pageEnds;
1616
}
1717

18-
//invalidate cached files to enable auto-recompile then reload
19-
//http://stackoverflow.com/questions/9210542/node-js-require-cache-possible-to-invalidate
20-
/**
21-
* Removes a module from the cache
22-
*/
23-
function purgeCache(moduleName) {
24-
// Traverse the cache looking for the files
25-
// loaded by the specified module name
26-
searchCache(moduleName, function (mod) {
27-
delete require.cache[mod.id];
28-
});
29-
30-
// Remove cached paths to the module.
31-
// Thanks to @bentael for pointing this out.
32-
Object.keys(module.constructor._pathCache).forEach(function(cacheKey) {
33-
if (cacheKey.indexOf(moduleName)>0) {
34-
delete module.constructor._pathCache[cacheKey];
35-
}
36-
});
37-
}
38-
39-
/**
40-
* Traverses the cache to search for all the cached
41-
* files of the specified module name
42-
*/
43-
function searchCache(moduleName, callback) {
44-
// Resolve the module identified by the specified name
45-
var mod = require.resolve(moduleName);
46-
47-
// Check if the module has been resolved and found within
48-
// the cache
49-
if (mod && ((mod = require.cache[mod]) !== undefined)) {
50-
// Recursively go over the results
51-
(function traverse(mod) {
52-
// Go over each of the module's children and
53-
// traverse them
54-
mod.children.forEach(function (child) {
55-
traverse(child);
56-
});
57-
58-
// Call the specified callback providing the
59-
// found cached module
60-
callback(mod);
61-
}(mod));
62-
}
63-
}
64-
//end of invalidate cached files
65-
66-
6718
function outputOnePage(content, destFolder) {
6819
mkdirp(destFolder, err => {
6920
if (err) {
70-
console.log('✗ Error: outputOnePage'.underline.maroon, err);
21+
console.log('✗ Error: outputOnePage');
7122
}
7223
else {
73-
let outPath = path.join(destFolder, "index.html");
74-
let outStream = fs.createWriteStream(outPath);
24+
const outPath = path.join(destFolder, "index.html");
25+
const outStream = fs.createWriteStream(outPath);
7526
outStream.once('open', () => {
76-
outStream.write('<!doctype html>\r\n');
27+
outStream.write('<!doctype html>');
7728
outStream.write(appendGATrackCode(content));
7829
outStream.end();
7930
});
@@ -102,8 +53,6 @@ function transformOnePage(pageFile, propFile, srcFolder, destFolder) {
10253

10354
const file = path.join(srcFolder, pageFile);
10455
let Component = require(file);
105-
//delete require.cache[require.resolve(file)]; //force to invalidate the cache for changed file
106-
purgeCache(file);
10756

10857
if (!Component) {
10958
console.log(`✗ Error: No component found at ${file}`);

0 commit comments

Comments
 (0)