Regroup non-static files

packages/gatsby-cli/src/create-cli.js

@@ -137,11 +137,17 @@ function buildLocalCommands(cli, isLocalSite) {
         type: `boolean`,
         default: false,
         describe: `Build site with link paths prefixed (set prefix in your config).`,
-      }).option(`no-uglify`, {
-        type: `boolean`,
-        default: false,
-        describe: `Build site without uglifying JS bundles (for debugging).`,
-      }),
+      })
+        .option(`no-uglify`, {
+          type: `boolean`,
+          default: false,
+          describe: `Build site without uglifying JS bundles (for debugging).`,
+        })
+        .option(`group-files`, {
+          type: `boolean`,
+          default: false,
+          describe: `Build site with grouping of files in subdirectories.`,
+        }),
     handler: handlerP(
       getCommandHandler(`build`, (args, cmd) => {
         process.env.NODE_ENV = `production`

packages/gatsby/cache-dir/.eslintrc.json

@@ -4,6 +4,7 @@
   },
   "globals": {
     "__PATH_PREFIX__": false,
+    "__GROUP_FILES__": false,
     "___emitter": false
   }
-}
+}

packages/gatsby/cache-dir/static-entry.js

@@ -55,6 +55,11 @@ const createElement = React.createElement
 export default (pagePath, callback) => {
   const pathPrefix = `${__PATH_PREFIX__}/`
 
+  // If enabled, group files in their respective folders otherwise generated
+  // non-static files will be left in the root of the output directory.
+  const pathToGroupStyles = __GROUP_FILES__ ? `styles/` : ``
+  const pathToGroupScripts = __GROUP_FILES__ ? `scripts/` : ``
+
   let bodyHtml = ``
   let headComponents = []
   let htmlAttributes = {}
@@ -193,6 +198,7 @@ export default (pagePath, callback) => {
   const scripts = scriptsAndStyles.filter(
     script => script.name && script.name.endsWith(`.js`)
   )
+
   const styles = scriptsAndStyles.filter(
     style => style.name && style.name.endsWith(`.css`)
   )
@@ -221,7 +227,7 @@ export default (pagePath, callback) => {
           as="script"
           rel={script.rel}
           key={script.name}
-          href={urlJoin(pathPrefix, script.name)}
+          href={urlJoin(pathPrefix, pathToGroupScripts, script.name)}
         />
       )
     })
@@ -252,7 +258,7 @@ export default (pagePath, callback) => {
             as="style"
             rel={style.rel}
             key={style.name}
-            href={urlJoin(pathPrefix, style.name)}
+            href={urlJoin(pathPrefix, pathToGroupStyles, style.name)}
           />
         )
       } else {
@@ -262,7 +268,7 @@ export default (pagePath, callback) => {
             data-href={urlJoin(pathPrefix, style.name)}
             dangerouslySetInnerHTML={{
               __html: fs.readFileSync(
-                join(process.cwd(), `public`, style.name),
+                join(process.cwd(), `public`, pathToGroupStyles, style.name),
                 `utf-8`
               ),
             }}
@@ -291,7 +297,9 @@ export default (pagePath, callback) => {
   // Filter out prefetched bundles as adding them as a script tag
   // would force high priority fetching.
   const bodyScripts = scripts.filter(s => s.rel !== `prefetch`).map(s => {
-    const scriptPath = `${pathPrefix}${JSON.stringify(s.name).slice(1, -1)}`
+    const scriptPath = `${pathPrefix}${pathToGroupScripts}${JSON.stringify(
+      s.name
+    ).slice(1, -1)}`
     return <script key={scriptPath} src={scriptPath} async />
   })
 

packages/gatsby/src/bootstrap/index.js

@@ -93,6 +93,8 @@ module.exports = async (args: BootstrapArgs) => {
   await del([
     `public/*.{html,css}`,
     `public/**/*.{html,css}`,
+    `public/scripts`,
+    `public/styles`,
     `!public/static`,
     `!public/static/**/*.{html,css}`,
   ])

packages/gatsby/src/commands/build-html.js

@@ -9,7 +9,7 @@ const { createErrorFromString } = require(`gatsby-cli/lib/reporter/errors`)
 const renderHTML = require(`../utils/html-renderer`)
 
 module.exports = async (program: any) => {
-  const { directory } = program
+  const { directory, groupFiles } = program
 
   debug(`generating static HTML`)
   // Reduce pages objects to an array of paths.
@@ -28,7 +28,11 @@ module.exports = async (program: any) => {
       if (e) {
         return reject(e)
       }
-      const outputFile = `${directory}/public/render-page.js`
+
+      const outputFile = groupFiles
+        ? `${directory}/public/scripts/render-page.js`
+        : `${directory}/public/render-page.js`
+
       if (stats.hasErrors()) {
         let webpackErrors = stats.toJson().errors.filter(Boolean)
         return reject(

packages/gatsby/src/commands/develop-html.js

@@ -7,7 +7,7 @@ const webpackConfig = require(`../utils/webpack.config`)
 const renderHTML = require(`../utils/html-renderer`)
 
 module.exports = async (program: any) => {
-  const { directory } = program
+  const { directory, groupFiles } = program
 
   debug(`generating static HTML`)
 
@@ -24,7 +24,11 @@ module.exports = async (program: any) => {
       if (e) {
         return reject(e)
       }
-      const outputFile = `${directory}/public/render-page.js`
+
+      const outputFile = groupFiles
+        ? `${directory}/public/scripts/render-page.js`
+        : `${directory}/public/render-page.js`
+
       if (stats.hasErrors()) {
         let webpackErrors = stats.toJson().errors
         console.log(`here`, webpackErrors[0])

packages/gatsby/src/utils/webpack.config.js

@@ -86,6 +86,25 @@ module.exports = async (
     return hmrBasePath + hmrSuffix
   }
 
+  function getOutputPaths() {
+    const path = program.groupFiles
+      ? directoryPath(`public/scripts`)
+      : directoryPath(`public`)
+
+    let publicPath = program.prefixPaths
+      ? `${store.getState().config.pathPrefix}/`
+      : `/`
+
+    if (program.groupFiles) {
+      publicPath = `${publicPath}scripts/`
+    }
+
+    return {
+      path,
+      publicPath,
+    }
+  }
+
   debug(`Loading webpack config for stage "${stage}"`)
   function getOutput() {
     switch (stage) {
@@ -109,24 +128,20 @@ module.exports = async (
         // A temp file required by static-site-generator-plugin. See plugins() below.
         // Deleted by build-html.js, since it's not needed for production.
         return {
-          path: directoryPath(`public`),
           filename: `render-page.js`,
           libraryTarget: `umd`,
           library: `lib`,
           umdNamedDefine: true,
           globalObject: `this`,
-          publicPath: program.prefixPaths
-            ? `${store.getState().config.pathPrefix}/`
-            : `/`,
+          path: getOutputPaths().path,
+          publicPath: getOutputPaths().publicPath,
         }
       case `build-javascript`:
         return {
           filename: `[name]-[chunkhash].js`,
           chunkFilename: `[name]-[chunkhash].js`,
-          path: directoryPath(`public`),
-          publicPath: program.prefixPaths
-            ? `${store.getState().config.pathPrefix}/`
-            : `/`,
+          path: getOutputPaths().path,
+          publicPath: getOutputPaths().publicPath,
         }
       default:
         throw new Error(`The state requested ${stage} doesn't exist.`)
@@ -167,12 +182,14 @@ module.exports = async (
       plugins.moment(),
 
       // Add a few global variables. Set NODE_ENV to production (enables
-      // optimizations for React) and what the link prefix is (__PATH_PREFIX__).
+      // optimizations for React), what the link prefix is (__PATH_PREFIX__),
+      // and __GROUP_FILES__ to organize output files.
       plugins.define({
         "process.env": processEnv(stage, `development`),
         __PATH_PREFIX__: JSON.stringify(
           program.prefixPaths ? store.getState().config.pathPrefix : ``
         ),
+        __GROUP_FILES__: !!program.groupFiles,
       }),
     ]
 
@@ -186,12 +203,12 @@ module.exports = async (
             clearConsole: false,
             compilationSuccessInfo: {
               messages: [
-                `You can now view your site in the browser running at ${program.ssl ? `https` : `http`}://${
-                  program.host
-                }:${program.port}`,
-                `Your graphql debugger is running at ${program.ssl ? `https` : `http`}://${program.host}:${
-                  program.port
-                }/___graphql`,
+                `You can now view your site in the browser running at ${
+                  program.ssl ? `https` : `http`
+                }://${program.host}:${program.port}`,
+                `Your graphql debugger is running at ${
+                  program.ssl ? `https` : `http`
+                }://${program.host}:${program.port}/___graphql`,
               ],
             },
           }),
@@ -227,7 +244,6 @@ module.exports = async (
                       )
                     }
                   }
-
                   const webpackStats = {
                     ...stats.toJson({ all: false, chunkGroups: true }),
                     assetsByChunkName: assets,