Changeset 43760 for branches/5.0

Timestamp:

10/19/2018 06:05:13 AM (7 years ago)

Author:

pento

Message:

Build Tools: Copy package JavaScript and CSS into wp-includes.

• grunt webpack:dev now copies packages JS into /src/wp-includes/js/dist, and CSS into /src/wp-includes/css/dist.
• grunt webpack:prod does the same, but into /build instead of /src.
• grunt build now runs the webpack:prod task.

Props atimmer, pento.
Fixes #45119.

Location:

branches/5.0

Files:

• .gitignore (modified) (1 diff)
• Gruntfile.js (modified) (1 diff)
• src/wp-includes/css (modified) (1 prop)
• src/wp-includes/js (modified) (1 prop)
• src/wp-includes/script-loader.php (modified) (4 diffs)
• tools/webpack/packages.js (modified) (5 diffs)

branches/5.0/.gitignore

@@ -19 +19 @@
 /jsdoc
 /vendor
+/src/wp-includes/js/dist
+/src/wp-includes/css/dist
 
 # Files and folders that get created in wp-content

branches/5.0/Gruntfile.js

@@ -936 +936 @@
         'includes:embed',
         'usebanner',
+        'webpack:prod',
         'jsvalidate:build'
     ] );

branches/5.0/src/wp-includes/script-loader.php

@@ -97 +97 @@
         }
 
-        $path     = "/js/dist/vendor/$handle$dev_suffix.js";
+        $path = "/wp-includes/js/dist/vendor/$handle$dev_suffix.js";
 
         $scripts->add( $handle, $path, $dependencies, false, 1 );
@@ -338 +338 @@
     foreach ( $packages_dependencies as $package => $dependencies ) {
         $handle  = 'wp-' . $package;
-        $path    = "/js/dist/$package$suffix.js";
+        $path    = "/wp-includes/js/dist/$package$suffix.js";
 
         $scripts->add( $handle, $path, $dependencies, false, 1 );
@@ -1608 +1608 @@
     $styles->add( 'wp-editor-font', $fonts_url );
 
-    $styles->add( 'wp-block-library-theme', '/styles/dist/block-library/theme.css' );
+    $styles->add( 'wp-block-library-theme', '/wp-includes/css/dist/block-library/theme.css' );
     $styles->add_data( 'wp-block-library-theme', 'rtl', 'replace' );
 
     $styles->add(
         'wp-edit-blocks',
-        '/styles/dist/block-library/editor.css',
+        '/wp-includes/css/dist/block-library/editor.css',
         array(
             'wp-components',
@@ -1634 +1634 @@
     foreach ( $package_styles as $package => $dependencies ) {
         $handle  = 'wp-' . $package;
-        $path     = '/styles/dist/' . $package . '/style.css';
+        $path     = '/wp-includes/css/dist/' . $package . '/style.css';
 
         $styles->add( $handle, $path, $dependencies );

branches/5.0/tools/webpack/packages.js

@@ -38 +38 @@
  * Maps vendors to copy commands for the CopyWebpackPlugin.
  *
- * @param {Object} vendors Vendors to include in the vendor folder.
+ * @param {Object} vendors     Vendors to include in the vendor folder.
+ * @param {string} buildTarget The folder in which to build the packages.
  *
  * @return {Object[]} Copy object suitable for the CopyWebpackPlugin.
  */
-function mapVendorCopies( vendors ) {
+function mapVendorCopies( vendors, buildTarget ) {
     return Object.keys( vendors ).map( ( filename ) => ( {
         from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
-        to: join( baseDir, `build/js/dist/vendor/${ filename }` ),
+        to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
     } ) );
 }
@@ -51 +52 @@
 module.exports = function( env = { environment: 'production', watch: false } ) {
     const mode = env.environment;
-    const suffix = mode === 'production' ? '.min': '';
+    const suffix = mode === 'production' ? '.min' : '';
+    const buildTarget = ( mode === 'production' ? 'build' : 'src' ) + '/wp-includes';
 
     const packages = [
@@ -144 +146 @@
     } );
 
-    const developmentCopies = mapVendorCopies( vendors );
-    const minifiedCopies = mapVendorCopies( minifiedVendors );
-    const minifyCopies = mapVendorCopies( minifyVendors ).map( ( copyCommand ) => {
+    const developmentCopies = mapVendorCopies( vendors, buildTarget );
+    const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
+    const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
         return {
             ...copyCommand,
@@ -159 +161 @@
     let cssCopies = packages.map( ( packageName ) => ( {
         from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
-        to: join( baseDir, `build/styles/dist/${ packageName }/` ),
+        to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
         flatten: true,
         transform: ( content ) => {
@@ -191 +193 @@
         output: {
             filename: `[basename]${ suffix }.js`,
-            path: join( baseDir, 'build/js/dist' ),
+            path: join( baseDir, `${ buildTarget }/js/dist` ),
             library: {
                 root: [ 'wp', '[name]' ]