Topics/regroup non static files (#6346)

* First try at cleaning up build output

* Adding flag to build, ordering pathPrefix correctly, and cleaned up styles/script paths.

* Removing the deletion of files as referenced by m-allanson and pieh

* Adding support for styles grouping

* renaming output directories to js and css

* First try at cleaning up build output

* Adding flag to build, ordering pathPrefix correctly, and cleaned up styles/script paths.

* Removing the deletion of files as referenced by m-allanson and pieh

* Adding support for styles grouping

* renaming output directories to js and css

* Removing config flag

* Removing config flag logic from styles

* Removing 'text/css' from CSS Link

* Woops, adding back the CSS as I was testing locally and commited the changes by mistkae

* Adding '../' to the relative static route similar to CSS

Author: brotzky

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

@@ -6,4 +6,4 @@
     "__PATH_PREFIX__": false,
     "___emitter": false
   }
-}
+}

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

@@ -58,6 +58,8 @@ const createElement = React.createElement
 
 export default (pagePath, callback) => {
   const pathPrefix = `${__PATH_PREFIX__}/`
+  const pathToGroupStyles = `css/`
+  const pathToGroupScripts = `js/`
 
   let bodyHtml = ``
   let headComponents = []
@@ -197,6 +199,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`)
   )
@@ -225,7 +228,7 @@ export default (pagePath, callback) => {
           as="script"
           rel={script.rel}
           key={script.name}
-          href={urlJoin(pathPrefix, script.name)}
+          href={urlJoin(pathPrefix, pathToGroupScripts, script.name)}
         />
       )
     })
@@ -249,23 +252,22 @@ export default (pagePath, callback) => {
     .forEach(style => {
       // Add <link>s for styles that should be prefetched
       // otherwise, inline as a <style> tag
-
       if (style.rel === `prefetch`) {
         headComponents.push(
           <link
             as="style"
             rel={style.rel}
             key={style.name}
-            href={urlJoin(pathPrefix, style.name)}
+            href={urlJoin(pathPrefix, pathToGroupStyles, style.name)}
           />
         )
       } else {
         headComponents.unshift(
           <style
-            data-href={urlJoin(pathPrefix, style.name)}
+            data-href={urlJoin(pathPrefix, style.name.slice(2))}
             dangerouslySetInnerHTML={{
               __html: fs.readFileSync(
-                join(process.cwd(), `public`, style.name),
+                join(process.cwd(), `public`, pathToGroupStyles, style.name),
                 `utf-8`
               ),
             }}
@@ -294,7 +296,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/commands/build-html.js

@@ -28,7 +28,9 @@ module.exports = async (program: any, activity: any) => {
       if (e) {
         return reject(e)
       }
-      const outputFile = `${directory}/public/render-page.js`
+
+      const outputFile = `${directory}/public/js/render-page.js`
+
       if (stats.hasErrors()) {
         let webpackErrors = stats.toJson().errors.filter(Boolean)
         return reject(

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

@@ -24,7 +24,9 @@ module.exports = async (program: any) => {
       if (e) {
         return reject(e)
       }
-      const outputFile = `${directory}/public/render-page.js`
+
+      const outputFile = `${directory}/public/js/render-page.js`
+
       if (stats.hasErrors()) {
         let webpackErrors = stats.toJson().errors
         console.log(`here`, webpackErrors[0])

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

@@ -117,7 +117,13 @@ module.exports = async ({
   stage: Stage,
   program: any,
 }): Promise<WebpackUtilsOptions> => {
-  const assetRelativeRoot = `static/`
+  /**
+   *  the leading `../` for assetRelativeRoot is required to ensure
+   * the static files extracted by webpack are not part of the
+   * "build-javascript" output path of `/js`. The same technique is
+   * used for CSS
+   */
+  const assetRelativeRoot = `../static/`
   const vendorRegex = /(node_modules|bower_components)/
   const supportedBrowsers = program.browserlist
 
@@ -443,8 +449,8 @@ module.exports = async ({
    */
   plugins.extractText = options =>
     new MiniCssExtractPlugin({
-      filename: `[name].[contenthash].css`,
-      chunkFilename: `[name].[contenthash].css`,
+      filename: `../css/[name].[contenthash].css`,
+      chunkFilename: `../css/[name].[contenthash].css`,
       ...options,
     })
 

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

@@ -87,6 +87,19 @@ module.exports = async (
     return hmrBasePath + hmrSuffix
   }
 
+  function getOutputPaths() {
+    const path = directoryPath(`public/js`)
+
+    let publicPath = program.prefixPaths
+      ? `${store.getState().config.pathPrefix}/js/`
+      : `/js/`
+
+    return {
+      path,
+      publicPath,
+    }
+  }
+
   debug(`Loading webpack config for stage "${stage}"`)
   function getOutput() {
     switch (stage) {
@@ -113,24 +126,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.`)
@@ -231,7 +240,6 @@ module.exports = async (
                       )
                     }
                   }
-
                   const webpackStats = {
                     ...stats.toJson({ all: false, chunkGroups: true }),
                     assetsByChunkName: assets,