Changeset 44159

Timestamp:

12/14/2018 04:10:26 AM (8 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.

Merges [43760] from the 5.0 branch to trunk.

Props atimmer, pento.
Fixes #45119.

Location:

trunk

Files:

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

trunk/.gitignore

@@ -20 +20 @@
 /wp-cli.local.yml
 /jsdoc
+/src/wp-includes/js
+/src/wp-includes/css/dist
 
 # Files and folders that get created in wp-content

trunk/Gruntfile.js

@@ -1347 +1347 @@
         grunt.registerTask( 'build', [
                 'clean:all',
-                'webpack:dev',
                 'copy:all',
                 'file_append',
@@ -1361 +1360 @@
                 'includes:embed',
                 'usebanner',
+                'webpack:prod',
                 'jsvalidate:build'
         ] );

trunk/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 );
@@ -337 +337 @@
 
         foreach ( $packages_dependencies as $package => $dependencies ) {
-                $handle = 'wp-' . $package;
-                $path   = "/js/dist/$package$suffix.js";
+                $handle  = 'wp-' . $package;
+                $path    = "/wp-includes/js/dist/$package$suffix.js";
 
                 $scripts->add( $handle, $path, $dependencies, false, 1 );
@@ -1801 +1801 @@
         $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',
@@ -1826 +1826 @@
 
         foreach ( $package_styles as $package => $dependencies ) {
-                $handle = 'wp-' . $package;
-                $path   = '/styles/dist/' . $package . '/style.css';
+                $handle  = 'wp-' . $package;
+                $path     = '/wp-includes/css/dist/' . $package . '/style.css';
 
                 $styles->add( $handle, $path, $dependencies );

trunk/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]' ]