From fc025842b03aed3308b73486e1aa95975601501e Mon Sep 17 00:00:00 2001 From: darrenmce Date: Wed, 20 Jul 2016 14:06:38 -0400 Subject: [PATCH] rework build configuration add publish build step --- .gitignore | 1 + package.json | 5 +-- public/dist/assets.json | 5 --- public/index.html | 33 ------------------ public/sitemap.xml | 12 ------- run.js | 58 +++++++++++++++++-------------- {public => templates}/index.ejs | 0 {public => templates}/sitemap.ejs | 0 webpack.config.js | 12 +++++-- 9 files changed, 45 insertions(+), 81 deletions(-) delete mode 100644 public/dist/assets.json delete mode 100644 public/index.html delete mode 100644 public/sitemap.xml rename {public => templates}/index.ejs (100%) rename {public => templates}/sitemap.ejs (100%) diff --git a/.gitignore b/.gitignore index abf6e3e..719c9ad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ **/node_modules/** .idea npm-debug.log +build/ diff --git a/package.json b/package.json index 2f3b1cf..482e007 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "file-loader": "^0.9.0", "firebase-tools": "^3.0.4", "front-matter": "^2.1.0", + "fs-extra": "^0.30.0", "highlight.js": "^9.5.0", "json-loader": "^0.5.4", "markdown-it": "^7.0.0", @@ -102,8 +103,8 @@ "clean": "node run clean", "build": "node run build", "build:debug": "node run build --debug", - "publish": "node run publish", - "publish:debug": "node run publish --debug", + "publish": "BUILD_PATH=../meet-tarantino.github.io node run publish-build --release && cd ../meet-tarantino.github.io && git add -A && git commit && git push origin master", + "publish-debug": "BUILD_PATH=../meet-tarantino.github.io node run publish-build && cd ../meet-tarantino.github.io && git add -A && git commit && git push origin master", "start": "node run" } } diff --git a/public/dist/assets.json b/public/dist/assets.json deleted file mode 100644 index f5b8f5d..0000000 --- a/public/dist/assets.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "main": { - "js": "/dist/main.js?ab028b77c31279fd91dc" - } -} \ No newline at end of file diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 21d7968..0000000 --- a/public/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Tarantino - - - - - - - - - - -
- - - diff --git a/public/sitemap.xml b/public/sitemap.xml deleted file mode 100644 index 6d33f95..0000000 --- a/public/sitemap.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - - https://meet-tarantino.github.io/ - - - https://meet-tarantino.github.io/error - - - https://meet-tarantino.github.io/about - - diff --git a/run.js b/run.js index acda991..a77f18f 100644 --- a/run.js +++ b/run.js @@ -1,26 +1,19 @@ -/** - * React Static Boilerplate - * https://github.com/kriasoft/react-static-boilerplate - * - * Copyright © 2015-present Kriasoft, LLC. All rights reserved. - * - * This source code is licensed under the MIT license found in the - * LICENSE.txt file in the root directory of this source tree. - */ - /* eslint-disable no-console, global-require */ const fs = require('fs'); +const fse = require('fs-extra'); const del = require('del'); const ejs = require('ejs'); const webpack = require('webpack'); +const webpackConfig = require('./webpack.config'); const config = { title: 'Tarantino', // Your website title url: 'https://meet-tarantino.github.io' // Your website URL - //project: 'tarantino' // Firebase project. See README.md -> How to Deploy }; +const paths = webpackConfig.buildPaths; + const tasks = new Map(); // The collection of automation tasks ('clean', 'build', 'publish', etc.) function run(task) { @@ -34,18 +27,18 @@ function run(task) { // // Clean up the output directory // ----------------------------------------------------------------------------- -tasks.set('clean', () => del(['public/dist/*', '!public/dist/.git'], { dot: true })); +tasks.set('clean', () => del([paths.build], { dot: true })); +tasks.set('clean-publish', () => del([`${paths.build}/**`, `!${paths.build}`, `!${paths.build}/.git` ], { force: true })); // // Copy ./index.html into the /public folder // ----------------------------------------------------------------------------- tasks.set('html', () => { - const webpackConfig = require('./webpack.config'); - const assets = JSON.parse(fs.readFileSync('./public/dist/assets.json', 'utf8')); - const template = fs.readFileSync('./public/index.ejs', 'utf8'); - const render = ejs.compile(template, { filename: './public/index.ejs' }); + const assets = JSON.parse(fs.readFileSync(`${paths.build}/dist/assets.json`, 'utf8')); + const template = fs.readFileSync(`${paths.templates}/index.ejs`, 'utf8'); + const render = ejs.compile(template, { filename: `${paths.templates}/index.ejs` }); const output = render({ debug: webpackConfig.debug, bundle: assets.main.js, config }); - fs.writeFileSync('./public/index.html', output, 'utf8'); + fs.writeFileSync(`${paths.build}/index.html`, output, 'utf8'); }); // @@ -55,17 +48,16 @@ tasks.set('sitemap', () => { const urls = require('./routes.json') .filter(x => !x.path.includes(':')) .map(x => ({ loc: x.path })); - const template = fs.readFileSync('./public/sitemap.ejs', 'utf8'); - const render = ejs.compile(template, { filename: './public/sitemap.ejs' }); + const template = fs.readFileSync(`${paths.templates}/sitemap.ejs`, 'utf8'); + const render = ejs.compile(template, { filename: `${paths.templates}/sitemap.ejs` }); const output = render({ config, urls }); - fs.writeFileSync('public/sitemap.xml', output, 'utf8'); + fs.writeFileSync(`${paths.build}/sitemap.xml`, output, 'utf8'); }); // // Bundle JavaScript, CSS and image files with Webpack // ----------------------------------------------------------------------------- tasks.set('bundle', () => { - const webpackConfig = require('./webpack.config'); return new Promise((resolve, reject) => { webpack(webpackConfig).run((err, stats) => { if (err) { @@ -78,11 +70,24 @@ tasks.set('bundle', () => { }); }); +tasks.set('staticAssets', () => { + fse.copySync(paths.staticAssets, paths.build, { clobber: true }); +}); + // // Build website into a distributable format // ----------------------------------------------------------------------------- tasks.set('build', () => Promise.resolve() .then(() => run('clean')) + .then(() => run('staticAssets')) + .then(() => run('bundle')) + .then(() => run('html')) + .then(() => run('sitemap')) +); + +tasks.set('publish-build', () => Promise.resolve() + .then(() => run('clean-publish')) + .then(() => run('staticAssets')) .then(() => run('bundle')) .then(() => run('html')) .then(() => run('sitemap')) @@ -109,9 +114,8 @@ tasks.set('build', () => Promise.resolve() tasks.set('start', () => { let count = 0; global.HMR = !process.argv.includes('--no-hmr'); // Hot Module Replacement (HMR) - return run('clean').then(() => new Promise(resolve => { + return run('clean').then(() => run('staticAssets')).then(() => new Promise(resolve => { const bs = require('browser-sync').create(); - const webpackConfig = require('./webpack.config'); const compiler = webpack(webpackConfig); // Node.js middleware that compiles application in watch mode with HMR support // http://webpack.github.io/docs/webpack-dev-middleware.html @@ -122,10 +126,10 @@ tasks.set('start', () => { compiler.plugin('done', stats => { // Generate index.html page const bundle = stats.compilation.chunks.find(x => x.name === 'main').files[0]; - const template = fs.readFileSync('./public/index.ejs', 'utf8'); - const render = ejs.compile(template, { filename: './public/index.ejs' }); + const template = fs.readFileSync(`${paths.templates}/index.ejs`, 'utf8'); + const render = ejs.compile(template, { filename: `${paths.templates}/index.ejs` }); const output = render({ debug: true, bundle: `/dist/${bundle}`, config }); - fs.writeFileSync('./public/index.html', output, 'utf8'); + fs.writeFileSync(`${paths.build}/index.html`, output, 'utf8'); // Launch Browsersync after the initial bundling is complete // For more information visit https://browsersync.io/docs/options @@ -134,7 +138,7 @@ tasks.set('start', () => { port: process.env.PORT || 8080, ui: { port: Number(process.env.PORT || 8080) + 1 }, server: { - baseDir: 'public', + baseDir: 'build', middleware: [ webpackDevMiddleware, require('webpack-hot-middleware')(compiler), diff --git a/public/index.ejs b/templates/index.ejs similarity index 100% rename from public/index.ejs rename to templates/index.ejs diff --git a/public/sitemap.ejs b/templates/sitemap.ejs similarity index 100% rename from public/sitemap.ejs rename to templates/sitemap.ejs diff --git a/webpack.config.js b/webpack.config.js index ab00083..a70db2e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,10 +23,18 @@ const babelConfig = Object.assign({}, pkg.babel, { cacheDirectory: useHMR, }); +const buildPaths = { + build: process.env.BUILD_PATH || './build', + templates: './templates', + staticAssets: './public' +}; + // Webpack configuration (main.js => public/dist/main.{hash}.js) // http://webpack.github.io/docs/configuration.html const config = { + buildPaths, + // The base directory for resolving the entry option context: __dirname, @@ -41,7 +49,7 @@ const config = { // Options affecting the output of the compilation output: { - path: path.resolve(__dirname, './public/dist'), + path: path.resolve(__dirname, `${buildPaths.build}/dist`), publicPath: '/dist/', filename: isDebug ? '[name].js?[hash]' : '[name].[hash].js', chunkFilename: isDebug ? '[id].js?[chunkhash]' : '[id].[chunkhash].js', @@ -78,7 +86,7 @@ const config = { // Emit a JSON file with assets paths // https://github.com/sporto/assets-webpack-plugin#options new AssetsPlugin({ - path: path.resolve(__dirname, './public/dist'), + path: path.resolve(__dirname, `${buildPaths.build}/dist`), filename: 'assets.json', prettyPrint: true, }),